TailwindCSS is gaining more and more popularity. I'll show you how to get started properly with TailwindCSS and how to customize it for your project.
First things first, this post is about how to get started, not should you get started with TailwindCSS. I’ve read much articles about why TailwindCSS is good or bad, I personally really like it and use it in much of my projects. If you do so as well or want to try it out, this article is for you.
How TailwindCSS works
As every technology, TailwindCSS changed over the last months and there are many ways to get things done. As of now, I’m aware of 3 ways to use TailwindCSS in your project:
PostCSS
You can use TailwindCSS as a plugin for PostCSS. What’s really awesome about using this method is that you have the full power of PostCSS available. As an example, you can add autoprefixer to automatically add vendor prefixes or use a preprocessor like Sass.
Command line (CLI)
If you don’t want to setup PostCSS and do all of that configuration stuff, you can use the CLI to get started quickly and without much configuration required.
CDN
Actually, this isn’t really a method like the other ones, because it’s not recommended for the production build. Click here for more information about the CDN build. (Same thing for the CDN JIT build coming with TailwindCSS 3.0)
Just-in-time (JIT)
Recently, TailwindLabs released a preview version of the Just-in-time compiler as the ”Next generation of TailwindCSS“.
Basically, the core concept is that TailwindCSS scanns your code for TailwindCSS-classes on every change and only generates the classes you need. This also introduced new possibilities and features like arbitrary values, all features available by default and much more. We’ll use the JIT compiler in this article.
(The JIT compiler becomes the default compiler in TailwindCSS 3.0)
Prepare the project
Now it’s time to get our hands on and start our code editor. Open a new folder and create a index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="build.css" />
</head>
<body></body>
</html>Note the linked CSS file build.css. We’ll use this filename later in the guide as output filename for PostCSS / TailwindCSS.
We also need a CSS file as entry point. In this example I’ll name this file style.css. In this file, we import the TailwindCSS classes / layers:
@tailwind base;
@tailwind components;
@tailwind utilities;Create the config file
To create the config file, we can simply run this command:
// If you want to use TailwindCSS with PostCSS (also generates the PostCSS config):
npx tailwindcss init -p
// If you want to use the CLI:
npx tailwindcss initBecause we want to use the JIT compiler, we have to do some changes here. Set the mode option in the tailwind.config.js file to jit to enable it. Because the JIT compiler looks at our code after changes, we need to tell the engine on which files to look at. This step is required for the JIT compiler to work properly.
module.exports = {
mode: "jit",
purge: [
"./index.html", // <- The HTML file we created
"./src/**/*.html", // <- You can also add a whole directory
"./src/**/*.js", // <- And other file types
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
plugins: [],
};In this example, we only need ./index.html inside the purge array, because that’s the only file we have.
Note: With TailwindCSS 3.0, purge may be renamed to content. So maybe this change is already live when you’re reading this article.
Also, we can get rid of the variants configuration stuff in the config because the JIT compiler enables all variants by default.
Use the CLI
Let’s start with the simpler method - the CLI. It’s basically just one command to build the project:
npx tailwindcss -i ./style.css -o ./build.cssThe -i argument is the input CSS file, in our case that’s the style.css file we’ve created earlier. The -o parameter is the output file.
This command runs TailwindCSS once. While development, you’ll add the -w argument to start TailwindCSS in watch mode:
npx tailwindcss -i ./style.css -o ./build.css -wThat’s all you need to get started with the CLI.
Use PostCSS
If you want to use TailwindCSS with PostCSS, first initialize npm:
npm init -yNow, we can install all the dependencies we need:
npm install -D tailwindcss postcss postcss-cli autoprefixerAfter the dependencies are installed, we can setup two scripts in our package.json, one to build the project and one for development:
{
"name": "example-postcss",
"version": "1.0.0",
"description": "",
"main": "postcss.config.js",
"scripts": {
"build": "postcss ./style.css -o ./build.css",
"dev": "postcss ./style.css -o ./build.css -w"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.4.0",
"postcss": "^8.3.11",
"postcss-cli": "^9.0.2",
"tailwindcss": "^2.2.19"
}
}The postcss commands are similar to the TailwindCSS CLI, the first argument is the input file, the second (-o) is the output file and for the development command we add -w to enable the watch-mode.
We can now run PostCSS using the commands we’ve just created:
// Build
npm run build
// Development
npm run devThat’s it! 🎉
TailwindCSS is now installed and you can start using it. I won’t teach you how to use it, because I think it’s mostly self-explainatory and the official TailwindCSS docs are already very helpful.
I hope you liked this guide and you’re now ready to start with TailwindCSS.
For more content on TailwindCSS, I can highly recommend their official YouTube-Channel. They create awesome screencasts about TailwindCSS and all it’s features and possibilities.
I’ll leave with this video recommendation, it’s about how to customize TailwindCSS to your needs, add your brand colors and more:
Thank you for reading and have a nice day 🤗👋
Hey 👋 Don't want to miss new articles?
Drop your mail and I'll notify you if I have something new!
