Tailwindcss common commands and colors

on

The working method with include script

When config or template is updated and you don't see changes apply. 

Then you have to rebuild css with changes and then rebuild include. 

npx tailwindcss -i static/input.css -o static/output.css --watch

python3 include.py

 

Step by step method from scratch.

Install Tailwind CSS

Install tailwindcss via npm, and create your tailwind.config.js file.

 

npm install -D tailwindcss 

npx tailwindcss init


Add the paths to all of your template files in your tailwind.config.js file.

 

vim tailwind.config.js

 

const colors = require('tailwindcss/colors')

module.exports = {
  content: ["./*.{html,js}"],
  theme: {
    extend: {
            colors: {
                'warm-gray': colors.warmGray,
                blue: colors.blue,
                yellow: colors.yellow,
                amber: colors.amber,
            },
        },
  },
  plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),

    ],
}

 

Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.

 

vim static/input.css

 

@tailwind base;
@tailwind components;
@tailwind utilities;


.video-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

[x-cloak] { display: none !important; }

 

 

Start the Tailwind CLI build process

Run the CLI tool to scan your template files for classes and build your CSS.

 

 npx tailwindcss -i static/input.css -o static/output.css --watch

 

if 

 

Error: Cannot find module '@tailwindcss/typography'

 

then you have to install it.. 

 

npm install -D '@tailwindcss/typography' 



 

 

🚀 Achieving 99+ Google PageSpeed with Tailwind CSS in a Django Project

When building high-performance web pages, optimizing CSS delivery is a critical step — especially for mobile users. In this post, I’ll walk you through how I took a simple Django HTML template and fully optimized it using Tailwind CSS, reducing CSS bloat and achieving a 99/100 PageSpeed score on mobile.

💡 The Goal

I had a Django template located at:

/home/sites/vacaturestoday/permanentjob/templates/permanentjob/permanentjob.html

Originally, it used the Tailwind CDN:

<script src="https://cdn.tailwindcss.com"></script>

Great for development — not ideal for production.

🚧 The Problem

  • Unpurged CSS from the CDN = ~3 MB
  • Slower page load
  • No customization or tree-shaking

✅ The Solution: Compile Tailwind CSS Locally

I used a dedicated Tailwind CSS setup located in:

/home/sites/vacaturestoday/firebase/

🔧 Step-by-Step Optimization Process

1. Install Node & Tailwind


curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc
nvm install --lts
npm install -D tailwindcss@2.2.19
npx tailwindcss init

2. Configure tailwind.config.js


module.exports = {
  purge: [
    '../permanentjob/templates/permanentjob/permanentjob.html',
  ],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

3. Create input.css


@tailwind base;
@tailwind components;
@tailwind utilities;

4. Add Build Script


"scripts": {
  "build:css": "NODE_ENV=production tailwindcss -i ./input.css -o ./static/css/output.css --minify"
}

Then run:

npm run build:css

Result: output.css went from 3.1 MB ➝ ~15 KB

5. Load the CSS in Django

Option A: Link the file


{% load static %}
<link href="{% static 'css/output.css' %}" rel="stylesheet">

Option B: Inline the CSS

views.py:


with open('/path/to/output.css') as f:
    css_inline = f.read()

return render(request, 'template.html', {'css_inline': css_inline})

Template:


<style>{{ css_inline|safe }}</style>

📊 The Result: Near-Perfect Scores

Using Google PageSpeed Insights:

  • Performance: 99
  • Accessibility: 97
  • Best Practices: 100
  • SEO: 100

🎯 Mission accomplished.

⚙️ Final Thoughts & Tips

  • Always use NODE_ENV=production to purge CSS
  • Avoid using the CDN in production
  • Consider inlining only critical CSS
  • Automate builds with npm run build:css

📝 Summary

With a clean Tailwind CSS setup and good Django practices, you can achieve blazing-fast performance even without complex tooling. Tailwind makes it easy — just remember to purge unused styles before going live.

Comments

Post a Comment