Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions examples/kendo-unstyled-tailwind/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# build output
dist/

# generated types
.astro/

# dependencies
node_modules/

# logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# environment variables
.env
.env.production

# macOS-specific files
.DS_Store

# jetbrains setting folder
.idea/

# package-lock.json
package-lock.json
15 changes: 15 additions & 0 deletions examples/kendo-unstyled-tailwind/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# Using KendoReact components in Unstyled mode and TailwindCSS

## The scenario
The client already works with TailwindCSS to style their application and wants to include our KendoReact components in their project. They want to continue using the same styling technique with Tailwind without the need to add KendoTheme.

## The solution
We can use KendoReact components in Unstyled mode and use Tailwind classes to style the components as it is done in the sample `tailwind-preset.ts` file.

## Kendo Unstyled preset
The preset file is a sample set of classes for each KendoReact unstyled component that provides one possible way to have it styled. It can be further customized according to the design needs.

## Getting started

1. npm i
2. npm start
9 changes: 9 additions & 0 deletions examples/kendo-unstyled-tailwind/astro.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { defineConfig } from 'astro/config';
import react from "@astrojs/react";

import tailwind from '@astrojs/tailwind';

// https://astro.build/config
export default defineConfig({
integrations: [react(), tailwind()]
});
Loading