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.

Upgrading from Django-Tailwind 2.x to Django-Tailwind 2.2

In this guide, I assume your TAILWIND_APP_NAME variable value is theme; replace it with your theme name if it is different.

  1. Install the latest Django-Tailwind version via pip:

    pip install django-tailwind

  2. Open the theme/static_src/postcss.config.js file and remove "tailwindcss" and "autoprefixer" plugins from it:

    theme/static_src/postcss.config.js 
    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.

  3. Next, open theme/static_src/package.json and update the scripts section to look like:

    theme/static_src/package.json 
    {
  "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.

  4. 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.

  5. 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.