Tailwind CSS

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
Go to Docs β†’

Configuration files#

Tailwind plugin produces the two necessary config files: tailwind.config.js and postcss.config.js
See Tailwind configuration docs β†’

Include Tailwind in your CSS#

Tailwind is imported directly in _app.tsx

pages/_app.tsx
import "tailwindcss/tailwind.css";

You can also include tailwind in your custom css β†’

Purging unused styles#

tailwind.config.js is configured to purge unused styles in pages and components.

tailwind.config.js
module.exports = {
purge: ["./pages/**/*.tsx", "./src/**/*.tsx"]
}

See guide on optimizing for production on Tailwind docs β†’

Configuring PostCSS#

Finally, we need to create a postcss.config.js file to set up Tailwind with Next.js properly.

postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

Adding Tailwind CSS to your project later#

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Refer to official documentation for detailed installation. β†’

Last updated on by Ali Emir Şen