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)
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)