Upgrading from v2 to v3
If you’re coming from Django-Tailwind 2.x
, your Tailwind CSS project probably depends on Tailwind CSS 2.x
. If
you want to use latest features of the version 3.x
, you need to upgrade your Tailwind CSS app from 2.x
to 3
.
In the following instructions, I assume that your Tailwind CSS app name is set as TAILWIND_APP_NAME = 'theme'
in settings.py
.
If it’s different for you, please replace the theme
with an app name of your choice, while following my steps.
Let’s do this!
Update Django-Tailwind to
3.x
by running the following command:pip install --upgrade django-tailwind
Next, update dependencies and plugins via
npm
. Go to theme/static_src directory and run the following command:npm install -D tailwindcss@latest \ @tailwindcss/typography@latest \ @tailwindcss/forms@latest \ @tailwindcss/aspect-ratio@latest \ @tailwindcss/line-clamp@latest \ postcss@latest \ autoprefixer@latest
Now, open theme/static_src/bs.config.js and replace
...tailwindConfig.purge
with...tailwindConfig.content
,Then, open theme/static_src/tailwind.config.js in a code editor, and
Remove the
mode
property. In Tailwind3.0
,jit
is always on, so there’s no use ofmode: jit
string anymore,Rename
purge
tocontent
,Remove dark mode configuration by deleting the line containing
darkMode
,Staying with the open theme/static_src/tailwind.config.js file, refer to the official Tailwind CSS upgrade guide and see if there’s anything else you need to change in your tailwind.config.js. In most cases everything should already be fine, but depending on your configuration, some parts may need your attention.
And that’s it. You’re now on the latest Django-Tailwind 3.0
with the latest Tailwind CSS 3.0
installed and ready to go.