[docs] Add live Tailwind CSS demo #30966
Conversation
| **App.js** | ||
| {{"demo": "StyledComponents.js", "hideToolbar": true}} | ||
|
|
||
| [](https://stackblitz.com/edit/github-ndkshy?file=pages%2Findex.tsx) |
There was a problem hiding this comment.
Should we have this in the examples too? What was the reason you decided this to be available on StackBlitz only?
There was a problem hiding this comment.
I didn't know we had this folder.
There was a problem hiding this comment.
Should we have this in the examples too?
The Tailwind CSS demo doesn't work with them, for some reason
What was the reason you decided this to be available on StackBlitz only?
Codesandbox is slow as hell with Next.js
| If you are used to Tailwind CSS and want to use it together with the MUI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/tailwind) example project. | ||
| If you use a different framework, or already have set up your project, follow these steps: | ||
|
|
||
| 1. Add Tailwind CSS to your project, following the instructions in https://tailwindcss.com/docs/installation. | ||
| 2. Remove Tailwind's `base` directive in favor of the `CSSBaseline` component provided by `@mui/material`, as it plays nicer with the MUI components. | ||
| 2. Remove Tailwind's `base` directive in favor of the `CssBaseline` component provided by `@mui/material`, as it plays nicer with the MUI components. |
There was a problem hiding this comment.
Wrong component name
| @@ -693,7 +701,8 @@ import Slider from '@mui/material/Slider'; | |||
| export default function App() { | |||
| return ( | |||
| <div> | |||
| <Slider defaultValue={30} className="color-indigo-500" /> | |||
There was a problem hiding this comment.
color-indigo-500 this doesn't exist.
There was a problem hiding this comment.
Ooops, it should have been text-indigo-500 I guess.
| @@ -13,7 +13,7 @@ | |||
| "resolveJsonModule": true, | |||
| "isolatedModules": true, | |||
| "noEmit": true, | |||
| "jsx": "preserve" | |||
| "jsx": "react" | |||
There was a problem hiding this comment.
Fix the export with Stackblitz and Codesandbox.
| @@ -21,6 +21,7 @@ | |||
| "react-dom": "latest" | |||
| }, | |||
| "devDependencies": { | |||
| "@types/node": "latest", | |||
There was a problem hiding this comment.
Fix the export with Stackblitz and Codesandbox.
| @@ -22,22 +21,19 @@ function Copyright() { | |||
| export default function App() { | |||
| return ( | |||
| <Container maxWidth="sm"> | |||
| <Box sx={{ my: 4 }}> | |||
| <div className="my-4"> | |||
There was a problem hiding this comment.
Box is not really relevant if you use Tailwind CSS
| @@ -14,7 +14,7 @@ | |||
| "resolveJsonModule": true, | |||
| "isolatedModules": true, | |||
| "noEmit": true, | |||
| "jsx": "react-jsx" | |||
| "jsx": "react" | |||
There was a problem hiding this comment.
Fix the export with Stackblitz and Codesandbox.
Fixed a few issues along the way.
https://deploy-preview-30966--material-ui.netlify.app/guides/interoperability/#tailwind-css