Tailwind CSS with djaong

The first you can install node.js before link here https://nodejs.org/en/

Step1. Create folder static in folder myapp & create folder css , font and image

Step2. Create folder jstools in folder myapp

Step3. install Tailwind

env) nouher@nouhers-MacBook-Pro myapp % cd jstools
(env) nouher@nouhers-MacBook-Pro jstools % npm init -y && npm install tailwindcss autoprefixer clean-css-cli && npx tailwindcss init -p

after cd to jstools folder you can coppy this code paste

npm init -y && npm install tailwindcss autoprefixer clean-css-cli && npx tailwindcss init -p

you can see in folder jstools

Step4. config build file Tailwind at package.json

You can copy this code paste in line6 “scripts”:

“build”: “tailwind build ../static/css/tailwind.css -o ../static/css/style.css && cleancss -o ../static/css/style.min.css ../static/css/style.css”

Step5. Create tailwind.css file in folder css

You can copy this code paste in tailwind.css

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

Step6. tailwind.config.js you can copy paste to tailwind.config.js

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

Step7. build taiwind

npm run build

you can see folder css show file style.css & style.min.css

Step8. add load static to html you can copy code here

{% load static %}
<link rel=”stylesheet” href=”{% static ‘css/style.min.css’ %}”>
<script src=”https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>