Integration Tailwind
1. Install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
2. Create configuration files
Create the following files in the root directory of your project:
tailwind.config.js
postcss.config.js
or (postcss.config.cjs
for Vite.js)
const config = {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
corePlugins: {
// Remove the Tailwind CSS preflight styles so it can use Material UI's preflight instead (CssBaseline).
preflight: false,
},
plugins: [],
};
export default config;
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
3. Update global styles
Modify src/global.css
to include Tailwind's layers.
...
/* scrollbar */
@import 'simplebar-react/dist/simplebar.min.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
html {
...
}