Originally posted at
How to add Tailwind CSS to your Django Project
For Django developers eager to set their projects apart, this article offers a strategic guide on transitioning from Bootstrap to Tailwind CSS within Django Cookiecutter projects.
Tailwind CSS, a utility-first framework, is renowned for its capability to facilitate unique, custom designs efficiently. Its utility-class-based styling methodology grants developers enhanced control over their project's aesthetics, fostering a contemporary, streamlined appearance that diverges from conventional Bootstrap designs.
This guide is designed to streamline the process of integrating Tailwind CSS, thus empowering your Django projects with a visually distinct and modern frontend while maintaining the robust backend functionality Django is known for.
By following this tailored approach, developers can achieve a bespoke visual identity for their web applications, leveraging the strengths of Tailwind CSS to create engaging, high-quality user experiences.
Let's get started.
Step 1: Create an Empty Cookiecutter Django Project
1.1. Install Cookiecutter:
First, you need to install Cookiecutter. Use pip to install it globally on your machine:
pip install cookiecutter
After installing Cookiecutter, you can verify the installation by running cookiecutter --version.
1.2. Generate Your Django Project:
Use Cookiecutter with the Django template to scaffold your project or build it online with our free django cookiecutter generator. Run the following command and follow the prompts to customize your project:
cookiecutter https://github.com/pydanny/cookiecutter-django
This command creates a new Django project with a standard structure. Adjust settings as needed based on the prompts.
1.3 Optional CSS Minification:
pip install django_compressor
To compress your Tailwind CSS file, wrap your CSS link tag with {% compress css %} and {% endcompress %} in your templates.
Step 2: Setup Tailwind CSS
2.1 Initialize Tailwind CSS in Your Project:
Navigate to your Django project's root directory and initialize Tailwind CSS:
cd your_project
npm install -D tailwindcss
npx tailwindcss init
This command creates a tailwind.config.js file in your project root directory.
2.2 Configure Tailwind for Required Styles:
Modify the tailwind.config.js file to incorporate styles into your HTML files by adjusting the content option to encompass the paths to all your HTML template files.
module.exports = {
content: [
// Main Templates
'./your_project/templates/*.html',
'./your_project/templates/**/*.html',
// Add other app's templates here
// './your_project/your_app/templates/*.html',
// './your_project/your_app/templates/**/*.html',
],
theme: {
extend: {},
},
plugins: [],
};
2.3 Create Your Tailwind CSS File:
Create a CSS file (e.g., tailwind.css) in your static/css directory with the following content to include Tailwind's directives:
@tailwind base;
@tailwind components;
@tailwind utilities;
This file will be located at your project's static folder your_project/your_project/static/css/
2.4 Build Your Tailwind CSS:
Run the following command to generate your Tailwind CSS file (directly under your project root dirctory):
npx tailwindcss-cli@latest build ./your_project/static/tailwind.css -o ./your_project/static/css/style.css --watch
This command performs the following actions:
-i ./your_project/static/css/tailwind.css: Specifies the input file path (tailwind.css) located in the static/css directory of your Django SaaS application.
-o ./your_project/static/css/style.css: Defines the output file path (style.css) where the compiled CSS will be saved, also within the static/css directory.
--watch: Instructs Tailwind CSS to monitor the input file for changes. Whenever you modify and save tailwind.css, Tailwind CSS automatically recompiles it to style.css, ensuring that your changes are immediately reflected in the output file without needing to run the command again.
This setup is particularly useful during development, as it streamlines the workflow by eliminating the need for manual recompilation, allowing you to focus on styling and iterating on your designs more efficiently.
Once the style.css file is generated, you can include it at your your_project/template/base.html and style your entire project.
{% compress css %}
<link href="{% static 'css/style.css' %}" rel="stylesheet"/>
{% endcompress %}
2.5 Removing Bootstrap Files
Within your base.html file, you will find two Bootstrap-related files: one with a .css extension and the other with a .js extension. Please remove both of these files to ensure they do not interfere with the new Tailwind CSS setup.
Step 3: Handling Safe CSS for Server-Side Rendering
This section emphasizes tailoring the Tailwind CSS setup to accommodate dynamic content and ensure styles are retained during server-side rendering. The crux of this adjustment lies in meticulously configuring tailwind.config.js to encompass your template paths and any dynamic class names your application employs.
For instance, if your server generates content using aspect- classes to maintain embedded youtube video aspect ratios, that aren't directly visible in your static HTML files monitored by the Tailwind CSS command line tool, these classes might inadvertently be omitted from the final stylesheet.
To prevent this, you should explicitly include such classes in the safelist within your tailwind.config.js file. This ensures that dynamically generated classes are preserved in the compiled CSS, maintaining the intended styling for server-rendered content.
module.exports = {
content: [
// Main Templates
'./your_project/templates/*.html',
'./your_project/templates/**/*.html',
// Add other app's templates here
// './your_project/your_app/templates/*.html',
// './your_project/your_app/templates/**/*.html',
],
theme: {
extend: {},
},
plugins: [],
// NEW
safelist: [
{
pattern: /aspect-+/
}
]
};
Enjoy the Modern Look
After configuring Tailwind CSS and ensuring it's building correctly, you can start developing your Django application with a modern, responsive design.
For example: add the following tailwind styled sample code into your home.html inside the {% block content %}
<div class="conatiner flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
<div class="absolute inset-0 bg-[url(/static/images/grid.svg)] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"></div>
<div class="relative bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
<div class="mx-auto max-w-md flex">
<div class="divide-y divide-gray-300/50 ml-5">
<h1 class="text-3xl font-bold">Django SaaS Boilerplate + Tailwind CSS</h1>
<div class="space-y-6 py-8 text-base leading-7 text-gray-600">
<p>Jumpstart your SaaS project with Django SaaS Boilerplate, including features like:</p>
<ul class="space-y-4">
<li class="flex items-center">
<svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="11"/>
<path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none"/>
</svg>
<p class="ml-4">
Integrated Stripe for payments
</p>
</li>
<li class="flex items-center">
<svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="11"/>
<path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none"/>
</svg>
<p class="ml-4">
Pre-configured Tailwind CSS for design
</p>
</li>
<li class="flex items-center">
<svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="11"/>
<path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none"/>
</svg>
<p class="ml-4">User authentication and management</p>
</li>
</ul>
<p>Perfect for launching your SaaS application with a solid foundation and modern
aesthetics.</p>
</div>
<div class="pt-8 text-base font-semibold leading-7">
<p class="text-gray-900">Ready to accelerate your SaaS project?</p>
<p>
<a href="https://djangosaas.com/#pricing" class="text-sky-500 hover:text-sky-600">Get the
Boilerplate →</a>
</p>
</div>
</div>
</div>
</div>
</div>
Do you see the following? Enjoy the great modern look and feel!
Additional Resources for Tailwind CSS and Django Integration
Official Tailwind CSS Documentation: Start with the Tailwind CSS documentation for the most up-to-date information on installation, configuration, and usage. It's an invaluable resource for understanding Tailwind's core concepts and features.
Stack Overflow: For troubleshooting specific issues, Stack Overflow offers a wealth of information. Searching for "Tailwind CSS Django integration issues" can lead you to discussions and solutions that others in the Django and Tailwind community have shared.
Django and Tailwind CSS Community Forums: Engage with communities on platforms like Reddit, Discord, or specialized forums for Django and Tailwind CSS. Community forums are excellent places to ask questions, share experiences, and get advice from experienced developers.
By exploring these additional resources, you can deepen your understanding of how Tailwind CSS works within a Django environment and navigate any challenges that arise during the integration process.
Whether you're troubleshooting a specific issue or looking to enhance your project with advanced Tailwind features, the collective knowledge and experiences shared within these resources can significantly aid in your development journey.
Django SaaS & AI Boilerplate
We hope you found this article helpful! If you're looking to bypass the setup complexities and dive straight into development with a production-ready, battle-tested template that includes Tailwind CSS, Django, Stripe, and much more, our Premium Django SaaS Boilerplate is the perfect solution for a swift launch.
Don't miss out on our launch special—get $100 OFF today and set your SaaS application on the fast track to success! Check out the Premium Django SaaS & AI Boilerplate now and take a significant leap forward in your development journey.
Top comments (0)