Following are the steps to set up Tailwind CSS in Django

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

npm install -D tailwindcss
npx tailwindcss init

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

Note that the file paths of the templates are described in the Django Templates Post. The content should be according to your own project structure.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./**/templates/**/*.{html,js}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 3: Add the Tailwind directives to your CSS

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

Create a styles.css file in the src folder inside the root directory of your project. Add the following code to it.

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

Step 4: Configure Django settings

Add the following code to the settings.py file of your project.

STATIC_URL = 'static/'
STATICFILES_DIRS = [
    BASE_DIR / "static",
]

MEDIA_URL = 'media/'
MEDIA_ROOT = BASE_DIR / 'media'

Step 5: Update your gitignore file

Add the following code to the .gitignore file of your project.

node_modules/

Step 6: Start the Tailwind CLI build process

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

You can remove the --watch flag if you don’t want the CLI to watch for changes and rebuild your CSS every time you save a file.

npx tailwindcss -i ./src/styles.css -o ./static/css/output.css --watch

• ← Previous Post
• Next Post →