DEV Community

Cover image for How to use TailwindCSS in any Python project
Abdulmumin yaqeen
Abdulmumin yaqeen

Posted on • Updated on • Originally published at yaqeen.me

How to use TailwindCSS in any Python project

We all really love TailwindCSS, I mean some don't, but even if you've never tried it, you've heard about it and maybe you are not soo much of a javascript dev, so setting it up in your project might become quite a hassle.

You might not even know what npm, npx or javascript gazillions of stuff and commands does, or maybe you tried to follow the tailwind installation guide step by step and you end up having alien files in your project you don't seem to understand.

To be honest, I was once in this situation too, getting into the mess of javascript definitely caused me a lot of headaches, and would struggle to understand what is happening to my project.

In this article, I present to you a solution to your problem, that is, taking away the hassle of setting up Tailwind in a non-javascript project.

  1. Introducing tailwindpie

  2. How tailwindpie works

  3. Guide to using tailwindpie

  4. Prerequisite/requirements

  5. Installing tialwindpie on your machine

  6. Setting up tailwind in any project

  7. Demo project with Flask.

Introducing tailwindpie

tailwindpie is a pip package that automates the process of installing and configuring tailwindCSS in any project, it is mostly around the mindset of Python projects, but it can literary be used to automate installation and setting up tailwind even in javascript projects.

The idea around tailwindpie is to help us, as Python devs to care less about the javascript noise of just running one simple command, and BOOM, you have tailwind setup for your project.

Another thing I tried to automate with tailwindpie is adding all the unnecessary javascript files to .gitignore so non of those noise moves around with your project.

That's it!!

How to use tailwindpie

Requirements

Because TailwindCSS depends on node and stuff, you are going to need to have the following installed

  • Nodejs

  • npm - comes with node, so no worries.

Installation

To install tailwindpie on your machine.



pip install tailwindpie


Enter fullscreen mode Exit fullscreen mode

In your project directory/folder, run



$ tailwindpie config


Enter fullscreen mode Exit fullscreen mode

Lastly,

In the created tailwind.config.js, replace it with the folder that contains all of your html files.



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


Enter fullscreen mode Exit fullscreen mode

Ok, one more thing

update the package.json with where you want to store the generated CSS,



"css": "npx tailwindcss -i ./input.css -o .STATIC_CSS_FOLDER/tailwind.css --watch"


Enter fullscreen mode Exit fullscreen mode

Note: make sure the folder is created!

In your HTML, add the path to the CSS.



<link
      rel="stylesheet"
      type="text/css"
      href="{{ url_for('static', filename='css/tailwind.css')}}"
/>


Enter fullscreen mode Exit fullscreen mode

In this case, we are using it in the base.html file of a Flask project!

Build CSS

once you have all this properly set up, you can then build the CSS.



$ tailwindpie build


Enter fullscreen mode Exit fullscreen mode

These commands will continue to run and track changes in your HTML and rebuild the CSS.

Why?

On the initial build of tailwindCSS, not all the classes are created and written into the 'tailwind.css' file. I mean it doesn't even make any sense, There are ten of thousands of classes available in Tailwind and this can even extend further.

This is why Tailwind tracks changes in your files and only adds to the CSS file, classes that you've used in your project.

When you are done, you can stop the build command with Ctrl + C

BOOM!!!

Let the magik of Tailwind begins.

Using Tailwindpie in a Flask project

So I'm going to do a little demo of tailwindpie in a flask project, it going to be super quick and easy.

  1. Start a Flask project

  2. Configure tailwind

  3. Write some classes

  4. Boom!!!.

Very quickly, we create the following project structure.

app.py



from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)


Enter fullscreen mode Exit fullscreen mode

index.html

So now we can setup tailwind in our project by running

Now, we have TailwindCSS configured for our project. Definitely easier than the traditional way,

What is left is to configure our paths.

in package.json

then tailwind.config.js

we can now link that path to our HTML

Finally, it is time to write some classes.

Great, but before we preview our changes, we have to build our css, mostly you should run tailwindpie build and keep it running in the background.

when we run that, we see an output like this!

Yeah, that's it! If your Flask server is up and running, we can view our changes in the browser.

Greate! This is looking amazing, and there you have it, TailwindCSS in your Python project.

You can star the project repository if you find this interesting

https://github.com/Abdulmumin1/tailwindpie

Bonus

if you don't have the TailwindCSS intelliSense extension installed in vscode, make sure to do it, it really makes things super easy.

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Happy Coding!

Top comments (0)