Setup TailwindCSS

Install tailwindcss via npm, and create your tailwind.config.js file.
```
npm install -D tailwindcss
npx tailwindcss init
```

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

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./templates/**/*.{html,js}"], // add all html, js files from templates directory
    theme: {
        extend: {
            colors: {
                'ppm-blue-100': '#DDE8F5',
                'ppm-blue-200': '#abc5e5',
                'ppm-blue-300': '#739FD4',
                'ppm-blue-400': '#3d699e',
                'ppm-blue-500': '#3c5e87',
                'ppm-blue-600': '#345175',
                'ppm-blue-700': '#143359',
                'ppm-blue-800': '#03233e',
                'ppm-blue-900': '#031D33',
                'ppm-bg-dark': '#03233e',
                'ppm-bg-gray': '#c3c3c3',
                'ppm-bg-light': '#ffffff',
                'ppm-white': '#ffffff',
                'ppm-black': '#000000',
                'ppm-orange': '#FAB400',
                'ppm-orange-hover': '#FFBE19',
            },
        },
    },
    darkMode: "class",
    plugins: [],
}

Build output css file

npx tailwindcss -i ./static/css/base.css -o ./static/css/[email protected]

In development environment, open another terminal and run following command to watch and compile tailwind.

npx tailwindcss -i ./static/css/base.css -o ./static/css/[email protected] -w

yarn dev

Add dev command in your package.json

"scripts": {
  "dev": "npx tailwindcss -i ./static/css/base.css -o ./static/css/[email protected] -w"
},

For production build, please use --minify flag to build minified css.

npx tailwindcss -i ./static/css/base.css -o ./static/css/[email protected] --minify

yarn build

Add build command in your package.json

"scripts": {
  "build": "tailwindcss -i ./static/css/base.css -o ./static/css/[email protected] --minify"
},

Add the output compiled CSS file to the <head> in base.html

<link href="{% static 'css/[email protected]' %}" rel="stylesheet">

farhad0085/Tailwind with Django.md

Setup TailwindCSS