- Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with build tools like webpack, Rollup, Vite, and Parcel.
-
Install tailwindcss and its peer dependencies via npm, and create your
tailwind.config.jsfile. -
npx init -y -
npm install -D tailwindcss postcss autoprefixer -
npx tailwindcss init
- Add Tailwind to your PostCSS configuration
- Add
tailwindcssandautoprefixerto yourpostcss.config.jsfile, or wherever PostCSS is configured in your project.
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};- Add the paths to all of your template files in your
tailwind.config.jsfile.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["*"],
theme: {
extend: {},
},
plugins: [],
};- Add the
@tailwinddirectives for each of Tailwind’s layers to your main CSS file.
@tailwind base;
@tailwind components;
@tailwind utilities;- Run your build process with
npm run dev
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent