Introduction
TailwindCSS is a utility-first CSS framework that allows you to style your HTML without needing to leave your HTML file. Most of the styling is done though pre-defined CSS classes. This results in a very easy system to use when adding style to your website.
This quick setup guide will get you to a point where you can start writing HTML and adding in CSS as you go.
If you're in a bit hurry and willing to sacrifice some features you can use the TailwindCSS CDN.
Installing Node.js
This guide is written with Linux in mind but you can also install Nodejs on Windows and Mac.
For RHEL based distros (Fedora, CentOS, Rocky Linux, etc..):
$ sudo dnf install nodejs
For Ubuntu based distros you can install Node from NodeSource:
$ curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
$ sudo apt-get install -y nodejs
Setup the Project environment
Now that we have Node installed, lets create our project environment.
First, cd into your workspace. I like to use ~/Code as my main local workspace.
$ cd ~/Code
Create a folder of us to work in and cd into that.
$ mkdir tailwind
$ cd tailwind
Initialize the directory for NPM. This will create a package.json file within the folder.
$ npm init -y
Now install TailwindCSS.
$ npm install tailwindcss
To finish off this environment, lets create a src and public folder. You can name these folders whatever you want.
$ mkdir src public
Generating the TailwindCSS CSS file
Next lets create a style.css file.
$ touch src/style.css
Then, using your preferred text editor, add the @tailwind directives so your style.css file looks like this:
@tailwind base;
@tailwind components;
@tailwind utilities;
Now, open the package.json file and add a new command to the scripts. The file should look like this.
{
"name": "tailwind",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "tailwind build -i src/style.css -o public/tailwind.css --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"tailwindcss": "^3.0.1"
}
}
Finally, create a tailwind.config.js file in your project root folder containing the following.
module.exports = {
content: ["./public/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Remember the "dev" script that we added into the package.json file? Now we're going to run it in a separate terminal.
$ npm run dev
This command will continue to run while you write your HTML. It will "watch" and "rebuild" your tailwind.css file as new utility classes are added into your HTML file. If you'd like to learn more about the Just-in-Time engine, check out this blog post.
You should now have a new tailwind.css file in the public folder. link this file into your HTML file and start coding away. Remember to keep the npm run dev command running in a separate terminal.
Using the style.css file
Now you can use the style.css file by adding a link tag into the <head> of your html source file.
<link href="./style.css" rel="stylesheet">
Enjoy the new setup and happy coding!
Top comments (0)