tailwindcss config with django

Dunham 0
Viewed 39

I can't figure out how to config tailwindcss with django. I might just be doing the tailwind side wrong but I know I've configured my django static files correctly. I've watched every video I can find and none of them address my specific problem. An explanation of how tailwind config works on a low level would also be helpful so I could diagnose the problem myself. thanks. error message file structure and config file

configuration tailwind-css django css
2 Answers

Config tailwind css in django:

For this we have to make a file inside the static with the name jstools and navigate to this folder and inside the jstools by using the command in the terminal.

cd jstools

After this, we need to run some commands to add tailwind CSS.

npm init -y

After this, run the second command.

npm install tailwindcss autoprefixer clean-css-cli

next step: run below command

npx tailwindcss init -p

After this command, you can see some JSON and js files inside the js tool.

Now go inside the package.json and replace the code inside the data with this

code.
"build": "tailwind build ../static/css/tailwind.css -o ../static/css/style.css && cleancss -o ../static/css/style.min.css ../static/css/style.css"

And after this, go to inside the tailwind.config.js.

And change the module exports with this:

future: {
        removeDeprecatedGapUtilities: true,
        purgeLayersByDefault: true,
    },
    purge: {
        enabled: false, //true for production build
        content: ['../**/templates/*.html', '../**/templates/**/*.html']
    },
    theme: {
        extend: {},
    },
    variants: {},
    plugins: [],

Now go to inside the CSS folder of static and make a new file with the name tailwind.css.

And inside the tailwind.css write this code:

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

Now we have to go inside the jstools using terminal and run this command in terminal:

-npm run build

And now we just have to load the static inside the HTML page.

And we are ready to run tailwind CSS.

Manoj Tolagekar0

I will show how it is implemented for me and works with optimization. Create frontend dir in in the root directory of the project:

├── backend
│   ├── backend
│   │   ├── asgi.py
│   │   ├── __init__.py
│   │   ├── settings.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   └── manage.py
├── frontend
└── venv

install tailwind (see docs)

cd frontend
npm install -D tailwindcss postcss postcss-cli autoprefixer cssnano

configurate tailwind:

package.json

"scripts": {
    "build": "postcss app/css/main.css -o app/css/main.min.css"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.8",
    "postcss": "^8.4.16",
    "postcss-cli": "^10.0.0",
    "tailwindcss": "^3.1.8"
  }
}

create postcss.config.js:

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
      cssnano:{     # optimizes for production
          preset: 'default'
      },
    }
  }

create tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: ["../backend/*/templates/*.{html, js}", "../backend/*/templates/components/*.{html, js}"],
  theme: {
    extend: {},
  },
  plugins: []
  
}

create a css folder:

mkdir app
cd app
mkdir css
cd css

Inside css folder create main.css and cofigurate in:

main.css

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

Now will back and run the script:

cd ../../
npm run bild

This will create a minified css file in your css folder (main.min.css)

And configurate settings.py:

CORE_DIR = Path(__file__).resolve().parent.parent.parent
FRONT_DIR = CORE_DIR / 'frontend'

STATICFILES_DIRS = FRONT_DIR / 'app/'

Now to call static use in your template: base.html

{% load static %}

<link rel="stylesheet" href="{% static 'css/main.min.css' %}">

The use of cssnano is recommended by the tailwind. Purge not supported in new versions. see docs

darl1ne0
Related