Skip to main content

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

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.

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.

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. β†’