-
Notifications
You must be signed in to change notification settings - Fork 39
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2548 from telerik/unstyle-example
Unstyle example
- Loading branch information
Showing
14 changed files
with
7,331 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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()] | ||
}); |
Oops, something went wrong.