How to use TailwindCSS with Django?

后端未结

关注

 3  1417

How to use all features of TailwindCSS in a Django project (not only the CDN), including a clean workflow with auto-reloading, and purgeCSS step to be production-ready?

相关标签:

3条回答

爱一瞬间的悲伤

2021-01-30 15:41
Django-Tailwind CSS is a very good package and it works well for me. Follow the docs properly and you will be fine.

Before you begin, make sure you have npm properly installed on your system

Quick start
1. Install the python package django-tailwind from pip
pip install django-tailwind

Alternatively, you can download or clone this repo and run pip install -e ..
1. Add tailwind to INSTALLED_APPS in settings.py
2. Create a tailwind-compatible Django-app, I like to call it theme:
python manage.py tailwind init theme
1. Add your newly created theme app to INSTALLED_APPS in settings.py
2. In settings.py, register tailwind app by adding the following string:
TAILWIND_APP_NAME = 'theme'
1. Run a command to install all necessary dependencies for tailwind css:
python manage.py tailwind install
1. Now, go and start tailwind in dev mode:
python manage.py tailwind start
1. Django Tailwind comes with a simple base.html template that can be found under yourtailwindappname/templates/base.html. You can always extend it or delete it if you have own layout.
2. If you're not using base.html template provided with Django Tailwind, add styles.min.css to your own base.html template file:
You should now be able to use Tailwind CSS classes in your html.

To build a production version of CSS run:

python manage.py tailwind build

For the live reload, this handles it: python manage.py tailwind start

For the build process, this handles it: python manage.py tailwind build

For the PurgeCSS process, see simple sample in the docs

For NPM path configuration error (esp. on windows), see docs
0 讨论(0)
发布评论:

提交评论
- 加载中...
轻奢々

2021-01-30 15:57
TL;DR
1. Install TailwindCSS within your Django project, like any JS project with npm
2. Use a live-reload server package with Django
3. Add purgeCSS config before deploying
More detailed explanation

1 - The TailwindCSS build process

Create a new directory within your Django project, in which you'll install tailwindCSS like in any vanilla JS project setup:
```
cd your-django-folder; mkdir jstoolchain; cd jstoolchain
npm install tailwindcss postcss-cli autoprefixer
npx tailwind init
touch postcss.config.js
```
In this postcss.config.js file, add:
```
module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ]
}
```
```
mkdir css; touch css/tailwind.css
```
In this tailwind.css file, add at least this:
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Now, add a script in your jstoolchain/packages.json file to create the build process and specify the output file, such as:
```
{
  "scripts": {
    "build": "postcss css/tailwind.css -o ../your-django-folder/your-path-to-static/css/tailwind-output.css"
  }
}
```
Now, run;

npm run-script build

This should run without error, and tailwind-output.css should be now filled with thousands of lines. Now you can actually use tailwindCSS classes, by including the outputted css file into a Django template file along with Django's call to load the static files:
```
{% load static %}

<head>
  <link rel="stylesheet" href="{% static "css/tailwind-output.css" %}">
</head>
```
2 - Handling auto-reload locally

What's missing now to ease development, is to auto-reload the django development server when an HTML file is changed and saved. For this, I installed django-livereload-server.

Just follow setup instructions, this will work as expected out of the box, without any special configuration.

3 - The purgeCSS process

When you're ready to deploy, to ensure the CSS output file is not bloated with useless classes, go to jstoolchain/tailwind.config.js file, and add:
```
  purge: {
    enabled: true,
    content: ['../your-django-folder/path-to-your-templates/**/*.html'],
  },
```
Now, running build script should produce a much smaller CSS output, production-ready file.

Ideas to improve the workflow
- The build script could be run automatically when the input tailwind files (css, js) are edited
- PurgeCSS could be run automatically when required, rather than adding it or removing it manually.
- Any other idea?
0 讨论(0)
发布评论:

提交评论
- 加载中...
轻奢々

2021-01-30 15:57
1. Go to your desired folder for installation. In my case:
```
 mkdir static/css/tailwind

 cd static/css/tailwind
```
2. Create package.json:
```
npm init -y
```
3. Install Tailwind via npm:
```
npm i tailwindcss
```
4. Create a css file and add code from official Tailwind documentation:
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
5. Open package.json and make this change to "scripts":
```
  "scripts": {
    "build:css": "tailwind build tw.css -o ../tailwind.css"
  },
```
6. Run the written script
```
npm run build:css
```
tw.css is the location of the file we created in 4th step. And ../tailwind.css is the location of the file we want the Tailwind css to be outputted. So, after running this command we will have a tailwind.css file with Tailwind base, components and utilities.
0 讨论(0)
发布评论:

提交评论
- 加载中...

How to use TailwindCSS with Django?

Quick start

TL;DR

More detailed explanation

1 - The TailwindCSS build process

2 - Handling auto-reload locally

3 - The purgeCSS process

Ideas to improve the workflow