A Complete Guide - Tailwind CSS Tailwind with Laravel or Django

Last Updated: 03 Jul, 2025   
  YOU NEED ANY HELP? THEN SELECT ANY TEXT.

Title: Tailwind CSS with Laravel or Django

1. Tailwind CSS Basics

Before integrating with Laravel or Django, it's crucial to understand the basics of Tailwind CSS.

  • Utility-First Approach: Instead of pre-defined classes for components, Tailwind provides low-level utilities that let you build any design directly in your HTML.
  • Responsive Design: Tailwind makes it easy to create responsive layouts with prefix modifiers like sm:, md:, lg:, xl:, and 2xl:.
  • Customization: Tailwind is highly customizable, enabling you to modify default values and add new ones through a configuration file.

2. Integrating Tailwind CSS with Laravel

Laravel is one of the most popular PHP frameworks and provides excellent support for modern front-end tooling.

Installation:

  1. Use Composer to create a new Laravel project: 
    composer create-project --prefer-dist laravel/laravel my-project
  2. Navigate to the project directory: 
    cd my-project
  3. Install Laravel Mix and Tailwind CSS: 
    npm install
npm install tailwindcss@latest postcss@latest autoprefixer@latest --save-dev
  4. Initialize Tailwind CSS: 
    npx tailwindcss init

Configuration:

  • Customize tailwind.config.js to include content paths where Tailwind should scan for utility classes.

Usage:

  • Import Tailwind into your resources/css/app.css: 
    @tailwind base;
@tailwind components;
@tailwind utilities;
  • Run the development server: 
    npm run dev

Example: Here’s a simple example of using Tailwind CSS in a Laravel Blade template:

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Laravel with Tailwind CSS</title> <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body class="bg-gray-100 h-screen flex items-center justify-center"> <div class="bg-white p-6 rounded-lg shadow-md"> <h1 class="text-2xl font-bold mb-4">Welcome to Laravel with Tailwind CSS</h1> <p class="text-gray-600">This is a simple example using Tailwind CSS's utility-first approach.</p> </div>
</body>
</html>

3. Integrating Tailwind CSS with Django

Django is a robust Python web framework ideal for developing complex web applications.

Installation:

  1. Set up a new Django project: 
    pip install django
django-admin startproject my_project
cd my_project
  2. Install Node.js and install Tailwind CSS along with other dependencies: 
    npm install tailwindcss@latest postcss@latest autoprefixer@latest

Configuration:

  • Generate a Tailwind configuration file: 
    npx tailwindcss init
  • Modify tailwind.config.js to include Django template paths.

Usage:

  • Create a CSS file, e.g., static/css/tailwind.css, and import Tailwind: 
    @tailwind base;
@tailwind components;
@tailwind utilities;
  • Compile the CSS using a build tool like npm (Webpack, Parcel, etc.) or Django’s static files management if you’re using something simpler.

Example: Here’s an example of using Tailwind CSS in a Django template:

Online Code run

🔔 Note: Select your programming language to check or run code at

💻 Run Code Compiler

Step-by-Step Guide: How to Implement Tailwind CSS Tailwind with Laravel or Django

Tailwind CSS with Laravel

Prerequisites:

  • PHP and Composer installed.
  • Node.js and npm installed.
  • Laravel installed and set up.

Step-by-Step Guide:

1. Create a New Laravel Project

First, create a new Laravel project using Composer:

composer create-project --prefer-dist laravel/laravel tailwind-laravel
cd tailwind-laravel

2. Install Tailwind CSS

Next, install Tailwind CSS along with its dependencies:

npm install tailwindcss postcss autoprefixer

Then, initialize Tailwind CSS:

npx tailwindcss init -p

This will create tailwind.config.js and a postcss.config.js file in your project directory.

3. Configure Tailwind CSS

Open tailwind.config.js and customize it as per your needs, or leave it default for now:

module.exports = { content: [ "./resources/**/*.blade.php", "./resources/**/*.js", "./resources/**/*.vue", ], theme: { extend: {}, }, plugins: [],
}

4. Include Tailwind in Your CSS

Create a new CSS file (if it doesn't exist) in resources/css/app.css and include Tailwind’s directives:

/* resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

5. Compile the CSS

Now compile the CSS using Vite (Laravel’s default bundler). Make sure Vite is installed:

npm install
npm run dev

6. Use Tailwind in Your Blade Templates

Start using Tailwind classes directly in your Blade templates. Here is a simple example:

<!-- resources/views/welcome.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS with Laravel</title> @vite(['resources/css/app.css'])
</head>
<body class="bg-gray-100"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <h1 class="text-3xl font-bold underline text-center my-10"> Hello, Tailwind CSS with Laravel! </h1> </div>
</body>
</html>

7. Run Your Laravel Application

Start the Laravel development server:

php artisan serve

Visit in your browser to see Tailwind CSS in action.

Tailwind CSS with Django

Prerequisites:

  • Python and pip installed.
  • Node.js and npm installed.
  • Django installed and set up.

Step-by-Step Guide:

1. Create a New Django Project

First, create a new Django project using Django-admin:

django-admin startproject tailwind_django .
cd tailwind_django

2. Install Tailwind CSS

Install Tailwind CSS along with its dependencies:

npm init -y
npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

This will create tailwind.config.js and a postcss.config.js file.

3. Configure Tailwind CSS

Open tailwind.config.js and configure it. You may need to adjust the paths based on your project structure:

module.exports = { content: [ './templates/**/*.html', './static/**/*.js', ], theme: { extend: {}, }, plugins: [],
}

4. Include Tailwind in Your CSS

Create a new CSS file (if it doesn't exist) in static/css/tailwind.css and include Tailwind’s directives:

/* static/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

5. Compile the CSS

Now compile the CSS using Vite. First, install Vite and the necessary plugins:

npm install vite @vitejs/plugin-vue --save-dev

Create a vite.config.js file:

// vite.config.js
import { defineConfig } from 'vite' export default defineConfig({ plugins: [], build: { outDir: './static/dist/' }
})

Create a build script in package.json:

"scripts": { "dev": "vite", "build": "vite build"
}

Compile the CSS:

npm run build

6. Create Your Template Files

Create a template file (e.g., home.html) in templates:

<!-- templates/home.html -->
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS with Django</title> <link rel="stylesheet" href="{% static 'dist/tailwind.css' %}">
</head>
<body class="bg-gray-100"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <h1 class="text-3xl font-bold underline text-center my-10"> Hello, Tailwind CSS with Django! </h1> </div>
</body>
</html>

7. Configure URL Routing

Ensure you have a view and URL routing to render the template. Open views.py and update it:

# tailwind_django/views.py
from django.shortcuts import render def home(request): return render(request, 'home.html')

Update urls.py:

# tailwind_django/urls.py
from django.contrib import admin
from django.urls import path
from .views import home urlpatterns = [ path('', home, name='home'), path('admin/', admin.site.urls),
]

8. Run the Django Development Server

Finally, run the Django development server:

python manage.py runserver

Visit in your browser to see Tailwind CSS in action.

You May Like This Related .NET Topic

📥 Download Code ▶️ Watch Online 📖 Read Description

Login to post a comment.