How to use TailwindCSS in any Python project

#webdev #tailwindcss #python #frontend

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.

Introducing tailwindpie
How tailwindpie works
Guide to using tailwindpie
Prerequisite/requirements
Installing tialwindpie on your machine
Setting up tailwind in any project
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

In your project directory/folder, run



$ tailwindpie config

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

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"

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')}}"
/>

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

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.

Start a Flask project
Configure tailwind
Write some classes
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)