Setting up Tailwind and PostCSS

Learn how to install Tailwind and get it compiling in a simple HTML project.

Setting up Tailwind and PostCSS

First, create a package.json file and install tailwindcss, postcss-cli, and autoprefixer:

npm init -y
npm install tailwindcss postcss-cli autoprefixer

Then, generate a tailwind.config.js file:

npx tailwind init

Next, create a postcss.config.js file:

module.exports = {
  plugins: [

Now create a CSS file and add the special @tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Add a simple build script to your package.json file to compile your CSS:

  // ...
  "scripts": {
    "build": "postcss css/tailwind.css -o public/build/tailwind.css"
  // ...

Run your build script to generate your CSS:

npm run build

Create a simple HTML file that includes your compiled CSS:

<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/build/tailwind.css">
  <h1 class="text-4xl font-bold text-center text-blue-500">Hello world!</h1>