How to add Tailwind to a React App in django?

Question

I'm trying to build a django app with React and Tailwind. I have checked and tried countless tutorials, now I'm able to preview the react app on http://127.0.0.1:8000/ But the tailwind classes are not working, no matter what I do. I have followed https://tailwindcss.com/docs/guides/create-react-app this tutorial, the css i use is linked correctly because if i add regular css classes I can see the changes. But the tailwind classes are not applied.

This is the structure of my django app with react:

┃ ┣ src
┃ ┃ ┣ components
┃ ┃ ┃ ┗ App.js
┃ ┃ ┗ index.js
┃ ┣ static
┃ ┃ ┣ css
┃ ┃ ┃ ┗ index.css
┃ ┃ ┣ frontend
┃ ┃ ┃ ┣ main.js
┃ ┃ ┃ ┗ main.js.LICENSE.txt
┃ ┃ ┗ images
┃ ┣ templates
┃ ┃ ┗ frontend
┃ ┃ ┃ ┗ index.html
┃ ┣ init.py
┃ ┣ admin.py
┃ ┣ apps.py
┃ ┣ models.py
┃ ┣ tests.py
┃ ┣ urls.py
┃ ┗ views.py

Any suggestions?

I noticed after I run npm run build, the tailwind 'className' is converted to 'class', I don't know if that's expected or a problem. If I change 'class' to 'className' in inspector, the style is still not applied.

I'm quite stuck with this, any pointers?

package.json

{
  "name": "data_driven_design",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "@babel/preset-env": "^7.21.4",
    "@babel/preset-react": "^7.18.6",
    "autoprefixer": "^10.4.14",
    "babel-loader": "^9.1.2",
    "mini-css-extract-plugin": "^2.7.5",
    "postcss": "^8.4.23",
    "tailwindcss": "^3.3.2",
    "webpack": "^5.81.0",
    "webpack-cli": "^5.0.2"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

index.css

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

.helloworld {
    background-color: mediumspringgreen;
}

tailwind.config.js

module.exports = {
  purge: {
    enabled: true,
    content: [
      './frontend/src/**/*.{html,js,jsx,ts,tsx}',
    ],
    options: {
      whitelist: []
    }
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      django: '#092e20',
      react: '#61DBFB',
      tailwind: '#00b4b6'
    }
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Answer 1

Give a try with "tailwindcss": "^2.2.16"