Setup Tailwind for Jinja
━━━━━━━━━━━━━━━━━━━━━━━━

I've recently given tailwindcss a second chance and am really liking it. Here is how I set it up for my python based projects.

Date: September 17, 2023

I’ve recently given tailwindcss a second chance and am really liking it. Here is how I set it up for my python based projects.

https://waylonwalker.com/a-case-for-tailwindcss

Installation
────────────

npm is used to install the cli that you will need to configure and compile tailwindcss.

[code]
  npm install -g tailwindcss-cli

Setup
─────

You will need to create a tailwind.config.js file, to get this you can use the cli.

[code]
  npx tailwindcss init

Using tailwind with jinja templates
───────────────────────────────────

To set up tailwind to work with jinja templates you will need to point the tailwind config content to your jinja templates directory.

[code]
  module.exports = {
    content: ["templates/**/*.html"],
  };

Setting up the base styles
──────────────────────────

I like to use the @tailwind base;, to do this I set up an input.css file.

[code]
  @tailwind base;
  @tailwind components;
  @tailwind utilities;

Compiling
─────────

Now that it’s all setup you can run the tailwindcss command. You will get an output.css with base tailwind plus any of the classes that you used.

[code]
  tailwindcss -i ./input.css -o ./output.css --watch