How to use TailwindCSS with Django?

Question

How to use all features of TailwindCSS in a Django project (not only the CDN), including a clean workflow with auto-reloading, and purgeCSS step to be production-ready?

W

Answer 1

1. Go to your desired folder for installation. In my case:

 mkdir static/css/tailwind

 cd static/css/tailwind

2. Create package.json:

npm init -y

3. Install Tailwind via npm:

npm i tailwindcss

4. Create a css file and add code from official Tailwind documentation:

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

5. Open package.json and make this change to "scripts":

  "scripts": {
    "build:css": "tailwind build tw.css -o ../tailwind.css"
  },

6. Run the written script

npm run build:css

tw.css is the location of the file we created in 4th step. And ../tailwind.css is the location of the file we want the Tailwind css to be outputted. So, after running this command we will have a tailwind.css file with Tailwind base, components and utilities.