Written by Sümeyye Sever

  1. Install Tailwind CSS
npm install tailwindcss @tailwindcss/cli

  1. Create folders

  2. Configure your template paths

    Add the paths to all of your template files in your tailwind.config.js file.

    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./build/*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

  3. Import Tailwind in your CSS

    src/input.css:

    @import "tailwindcss";

  4. Initialize the npm

    npm init -y

  5. Install prettier plugin

    npm i -D prettier-plugin-tailwindcss

  6. Add node_modules to .gitignore file

  7. Add CLI tool and prettier to package.json file

      "scripts": {
    "tailwind": "npx @tailwindcss/cli -i ./src/input.css -o ./build/css/style.css --watch",
    "prettier": "npx prettier --write **/*.html"
  },

  8. Start the Tailwind CLI build process

    Run the CLI tool to scan your template files for classes and build your CSS.

    npm run tailwind

  9. Start using Tailwind in your HTML

    Add your compiled CSS file to the <head> and start using Tailwind’s utility classes to style your content.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="min-h-screen grid place-content-center">
    Hello
</body>
</html>