Buy nowGet update
  • getting started
    • Introduction
    • Quick start
    • Mock server
    • Deployment
    • Package & license
    • Setup
    • Figma
  • theme UI
    • Colors
    • Typography
    • IconsNEW
    • Shadows
    • Css vars
    • Logo
    • Layout
    • Navigation
    • Settings
  • Global
    • Styles
    • Config
    • Components overrides
  • development
    • Routing
    • Subfolder
    • Authentication
    • Environment variables
    • Api calls
    • Multi language
    • Structure
    • Clean project
    • Dependencies
    • Tailwind
    • Migrate to CRA
    • Credit assets
  • support
    • 🔵 Update
    • 🔴 Faqs & support
    • 🟣 Changelogv7.4.0
© All rights reserved.ContactHome

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;
tailwind.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
postcss.config.js
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 {
  ...
}
src/global.css

🔗 Reference:
  • Tailwind CSS + Vite Guide
  • Material UI + CRA + Tailwind Example