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

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. →