Setup Tailwind for Jinja

Waylon Walker

Installation #

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






        
npm install -g tailwindcss-cli

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






        
npx tailwindcss init

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"],
};

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






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

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