YouTube Tutorial on how to Configure Django With Tailwind CSS
(1) create a virtual environment and activate it
- creating a virtual environment
python -m venv venv
- activation in windows
.\venv\Scripts\activate
- activation in Linux
source venv/bin/activate
- Install django
pip install django
(2) create a project
django-admin startproject django_project .
(3) create an app
python manage.py startapp myapp
(4) create a folder for our static files
mkdir static/css
(5) Add the following code in settings.py
STATIC_URL = "static/"
STATICFILES_DIRS = [
BASE_DIR / "static",
]
(6) create a folder for all tailwind resources
mkdir resources
- This folder is where we will run node [npm]:
(7) Change directory to resource folder
cd resources
(8) Run the following commands to initialize npm, install required resources and initialize tailwindcss respectively:
npm init -y
npm install tailwindcss autoprefixer clean-css-cli
npx tailwindcss init -p
(9) Now we must make some modifications in some file
i.e in:
package.json
Replace "scripts" with code below
...
"scripts": {
"build": "tailwind build ../static/css/tailwind.css -o ../static/css/style.css && cleancss -o ../static/css/style.min.css ../static/css/style.css --watch"
},
...
tailwind.config.js
Replace whole code with the one below:
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
purge: {
enabled: false, //true for production build
content: [
'../**/templates/*.html',
'../**/templates/**/*.html'
]
},
theme: {
extend: {},
},
variants: {},
plugins: [],
}
(10) We add some input to tailwind, that will be processed to give what we want in static/css/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
(11) Now we run the build command we added to the package.json file before
npm run build
Two files will be generated:
a)styles.css
b)styles.min.css
(12) Link the style.css file to your django html file's head tag
NOTE: Explanations are in my YouTube Channel, Click Here -> KwargDevs For My YouTube Channel
Top comments (0)