Skip to content

Commit

Permalink
Merge pull request #2548 from telerik/unstyle-example
Browse files Browse the repository at this point in the history
Unstyle example
  • Loading branch information
zdravkov authored Oct 4, 2024
2 parents ff880fa + 94196ad commit 9b9c266
Show file tree
Hide file tree
Showing 14 changed files with 7,331 additions and 0 deletions.
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

0 comments on commit 9b9c266

Please sign in to comment.