If you like me scouring the web, AI Models, or Stack Overflow trying to find out how to add custom colors to Tailwind, you may have come across some articles indicating you should add a tailwind.config.js file to your project. Please Stop 🛑 !

There’s definitely been some changes, and one of them is the way we do custom colors. You don’t need a tailwind.config.js to add custom colors like you did in previous Tailwind versions.

In Tailwind CSS v4, the team introduced a zero-config mode, meaning: You don’t need a tailwind.config.js file at all to start using Tailwind. It has 1st class support for CSS variables….. no more javascript config file.

I wish I would have found this out sooner. I spent two days of banging my head against the wall refactoring my tailwind.config.js file and running “python manage.py tailwind build” , “python manage.py tailwind start”, and “python manage.py runserver” over and over, hoping the coding gods would change my background color 😢. To give you some context about the project, here it is.

I’m currently working on building a new web-app for a Telehealth therapy service called Empowered Path Therapy. I’m building a new front end with Django DTL, Django-Cotton for building components, and a backend with a CMS with Wagtail. Now, this is my first time using Tailwind. Yes, I know I am late to the party. I am a creature of habit. BOOTSTRAP!!

After installing Tailwind for the first time using the python django-tailwind 4.0.1 package, I ran into a roadblock. I didn’t see a tailwind.config.js file that all of my AI models suggested I implement in my project. My mistake from the beginning was trying to create a tailwind.config.js file manually and add my custom colors in it, but this did not work. Nor was it necessary.

How to add Custom Colors

When using the django-tailwind package, which makes it easy to integrate Tailwind CSS into Django projects using PostCSS and the Tailwind CLI, all within Django’s existing staticfiles workflow, a theme folder gets created in the root of your directory. If you dive into the theme folder, you will find:

    theme/
    ├── __pycache__/
    ├── static/
    │   └── css/
    │       └── dist/
    ├── static_src/
    │   ├── node_modules/
    │   ├── src/
    │   │   └── styles.css
    │   ├── .gitignore
    │   ├── package-lock.json
    │   ├── package.json
    │   └── postcss.config.js

Find the static_src folder -> src -> and dive into the styles.css file. This is where you can create your custom colors via CSS variables. Like so:

Assuming you have a Django properly set up and Tailwind installed, open your terminal and run these commands: python manage.py tailwind build, python manage.py tailwind start, and in a new terminal window, python manage.py runserver.

Here is what my Django template looks like:

And here is the result on my dev server:

I hope this helps someone out there who was stuck like me 👍

You can learn about me here https://hroman.codes/ or follow me on x or YouTube. FYI, I’m always looking for new projects to work on. Hit me up!