Today I'm officially announcing the release of Django-Tailwind v2.2
. It was soft-launched last week, and since I haven't got any complaints, I think I'm good to let you all know about the release.
The current update adds improved support for the latest 2.2
version of the Tailwind CSS framework.
So if you already have Django-Tailwind set up with the previous configuration and want to use Tailwind CSS v2.2
with it, you might want to follow the upgrade steps below.
In this guide, I assume your TAILWIND_APP_NAME
variable value is theme
; replace it with your theme name if it is different.
Install the latest Django-Tailwind version via pip
:
pip install django-tailwind
Open the theme/static_src/postcss.config.js
file and remove "tailwindcss"
and "autoprefixer"
plugins from it:
module.exports = {
plugins: {
"postcss-import": {},
"postcss-simple-vars": {},
"postcss-nested": {},
- "tailwindcss": {},
- "autoprefixer": {},
},
}
If you have other postcss plugins installed, they can stay. The basic idea here is to remove tailwindcss
and autoprefixer
. We do this because autoprefixer
is now built into Tailwind CSS v2.2
, and tailwindcss
is now a command-line tool, not a postcss plugin as it was before v2.2
.
Next, open theme/static_src/package.json
and update the scripts
section to look like:
{
"scripts": {
"start": "npm run dev",
"build": "npm run build:clean && npm run build:tailwind",
"build:clean": "rimraf ../static/css/dist",
"build:tailwind": "cross-env NODE_ENV=production tailwindcss --postcss -i ./src/styles.css -o ../static/css/dist/styles.css --minify",
"sync": "browser-sync start --config bs.config.js",
"dev:tailwind": "cross-env NODE_ENV=development tailwindcss --postcss -i ./src/styles.css -o ../static/css/dist/styles.css -w",
"dev:sync": "run-p dev:tailwind sync",
"dev": "nodemon -x \"npm run dev:sync\" -w tailwind.config.js -w postcss.config.js -w bs.config.js -e js",
"tailwindcss": "node ./node_modules/tailwindcss/lib/cli.js"
}
}
Here we replaced the postcss
command with the tailwindcss
command.
Staying in theme/static_src/package.json
, find the tailwindcss dependency in devDependencies
and make sure its value is"~2.2.4"
. This way, you fix the Tailwind CSS version to the 2.2.x
branch, that gives you better control over future Tailwind CSS updates.
Finally, go to the root of your project and run the following command to install the updates of the JavaScript dependencies:
python manage.py tailwind update
That's it, you have updated your old project, and it is now compatible with the Tailwind CSS v2.2
. Try how the build works by running the command in your terminal:
python manage.py tailwind build
You should see the build output that completes without errors.
If you use and like Django-Tailwind, I would appreciate you sharing this post. Thank you in advance, Tim.
Hey, if you've found this useful, please share the post to help other folks find it: