- 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.js
file. -
npx init -y
-
npm install -D tailwindcss postcss autoprefixer
-
npx tailwindcss init
- Add Tailwind to your PostCSS configuration
- Add
tailwindcss
andautoprefixer
to yourpostcss.config.js
file, 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.js
file.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["*"],
theme: {
extend: {},
},
plugins: [],
};
- Add the
@tailwind
directives 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