DEV Community

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

Posted on

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

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
Enter fullscreen mode Exit fullscreen mode
  • Install Django
pip3 install django
Enter fullscreen mode Exit fullscreen mode
  • Create a new project and core folder
django-admin startproject mysite && cd mysite && python3 manage.py startapp core
Enter fullscreen mode Exit fullscreen mode
  • Make sure your site runs properly
python3 manage.py runserver
Enter fullscreen mode Exit fullscreen mode
  • Create static directory
mkdir static && mkdir static/css
Enter fullscreen mode Exit fullscreen mode
  • Create a folder for JS
mkdir jstools && cd jstools
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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"
  },
Enter fullscreen mode Exit fullscreen mode
  • 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: [],
}
Enter fullscreen mode Exit fullscreen mode
  • In static/css* create new file called tailwind.css and add the following in it
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode
  • Now go to jstools directory and run:
npm run build
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

Discussion (0)