Setting up Tailwind CSS

Install and setp-up TailwindCSS.

Install Tailwind via npm

Install Tailwind and its peer-dependencies using npm:

# If you're on Next.js v10 or newer
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

# If you're on Next.js v9 or older
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Create your configuration files

Create tailwind.config.js and postcss.config.js in the root of the project. tailwind.config.js should be like:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

postcss.config.js should be like:

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

Your turn

Click on the Dev Environment button and follow the readme file instruction to install TailwindCSS and it's dependencies in a live project.