Use Tailwindcss for your django projects

If you're a developer, chances are that you've been in this situation before. You're writing CSS for your Django app, and it's not really coming naturally to you. The code is looking sloppy and unorganized, so the whole project looks like a mess! That's where Tailwindcss comes in handy: You can start using Tailwindcss to write clean and organized CSS for your Django application and forget about messy CSS for the rest of your life!

In this post, we are going to see how you can install Tailwindcss for your Django application.

Create a new Django application

Create new virtualenv and activate the environment

virtualenv -p python3 tailwindcss && source tailwindcss/bin/activate

Install Django

pip3 install django

Create a new project and core folder

django-admin startproject mysite && cd mysite && python3 manage.py startapp core

Make sure your site runs properly
```
python3 manage.py runserver
```
Create static directory
```
mkdir static && mkdir static/css
```
Create a folder for JS
```
mkdir jstools && cd jstools
```

Install and setup tailwind

Make sure you are in jstools folder

npm init -y && npm install tailwindcss autoprefixer clean-css-cli && npx tailwindcss init -p

Add build command to your scripts Open package.json file and change the scripts section to following

"scripts": {
  "build": "tailwind build ../static/css/tailwind.css -o ../static/css/style.css && cleancss -o ../static/css/style.min.css ../static/css/style.css",
  "test": "echo \"Error: no test specified\" && exit 1"
},

Open the tailwind.config.js and paste the following in it

module.exports = {
  future: {
      removeDeprecatedGapUtilities: true,
      purgeLayersByDefault: true,
  },
  purge: {
      enabled: false, //true for production build
      content: [
          '../**/templates/*.html',
          '../**/templates/**/*.html'
      ]
  },
  theme: {
      extend: {},
  },
  variants: {},
  plugins: [],
}

In static/css* create new file called tailwind.css and add the following in it
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Now go to jstools directory and run:
```
npm run build
```
This generates styles.css and styles.min.css
In your template link to styles.min.css and voilà you have tailwind in your project
```
<link href="${static.url('css/style.min.css')}" rel="stylesheet">
```

Tailwindcss: Fall in Love with Writing CSS Again for your Django Application

Create a new Django application

Install and setup tailwind