Issue

This Content is from Stack Overflow. Question asked by Dunham

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

Solution

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.

This Question was asked in StackOverflow by Dunham and Answered by Manoj Tolagekar It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.