Tags

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.








        

npm install -g tailwindcss-cli

Setup

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








        

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.








        

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.








        

@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.








        

tailwindcss -i ./input.css -o ./output.css --watch