Tailwind CSS is one of the most popular CSS framework nowadays. The framework operates on a lower level by providing a developer with a set of CSS helper classes. It doesn’t provide the pre-built components as same as Bootstrap framework. With the utility first design paradigm of Tailwind CSS, Tailwind gives a lot of freedom for developers. It also let you create the unique designs. Tailwind CSS comes with Tailwind CLI which is very handy for developers.
In this tutorial, we will setup Tailwind CSS using Tailwind CLI. Since the process will take long, I will split this tutorial into two parts. Part 1, we will focus on how to install Tailwind and create the configuration file for our customization in Part 2. Part 2, we will build the simple landing page with Tailwind CSS.
Recommended
Before continue with Tailwind CSS installation and using it, I would recommend that you learn flexbox, CSS grid and Nodejs (npm and npx).
Initial folder and file setup
tailwind-lp Folder
For this tutorial, we will create a new fresh folder called “tailwind-lp“. Then we will open VS code and add this new folder into new workspace which we will enable the useful extensions for the tutorial in this Workspace. I recommend that you should use workspace for your projects. It is useful when you develop multiple projects with different extensions.
What is Workspace in VS Code?
Workspace is the collection of one or more folders that are opened in a VS Code window(instance). Mostly you will have only one folder in one Workspace. However, you can include more than one folder using Multi-root workspaces.
What you can do with Workspace in VS Code?
– Configure settings that only apply to a specific folder or folders in that Workspace
– Store and restore UI state associated with that Workspace
– Selectively enable or disable extensions only for that Workspace
Index.html
Now, we will create a new index.html under new “dist” folder which we will be under “tailwind-lp” folder. Once index.html is created, just paste the HTML code below into the 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>Tailwind CSS - Simple Landing Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>As it mentions in the doc, for Tailwind’s style to work as expected, you want to use HTML5 doctype and add the responsive viewport meta tag in order to render the Tailwind’s style properly on all devices.
The responsive viewport meta tag looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Folder and file we have so far
Now we have tailwind-lp folder and index.html.
|- tailwind-lp
|– dist/index.html
Install useful extensions – optional
This is an optional. In VS Code, we can install four extensions into our workspace. You don’t need these extensions if you don’t want to. But it will be easier when you follow along in this tutorial.
- Auto Close Tag
- Live Server
- Tailwind CSS IntelliSense: This extension will show the helper classes list from Tailwind CSS when you start to type any Tailwind class in class attribute in HTML markup. In order to use Tailwind CSS IntelliSense, you must have tailwindcss installed and a Tailwind config file names “tailwind.config.js” in your workspace. You can install tailwindcss using npm (Nodejs is required to install). You will have node_modules folder with libraries, package.json and package-lock.json as the result. If you don’t want this extension, you just skip it.
npm install -D tailwindcss@latest3 ways to use Tailwind CSS in your project
Using Tailwind via CDN
You should not use CDN build for your production. The Tailwind CSS file size will be way too big. And normally you don’t use all Tailwind helper classes in your project as well. The big CSS file size will be slow down the loading time.
If you want to try a quick demo or play around with Tailwind CSS, you can use CDN. Just add the link meta tag in your HTML.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">Install Tailwind CSS as a PostCSS plugin
I personally setup PostCSS using autoprefixer for my projects. This way, I will make sure all CSS will work with all major browsers without any issues since all rules are checked and automatically add the vendor prefixes to rules by Can I use. In this tutorial, we will install Tailwind using Tailwind CLI. So I don’t cover this method here.
Why I choose Tailwind CLI? Because I want to compile the CSS with Tailwind without integrating it into any build tooling (SASS, LESS). If you prefer to setup Tailwind CSS as a PostCSS plugin, you can follow the Tailwind doc.
Install Tailwind CSS using Tailwind CLI
Tailwind CSS requires Node.js 12.13.0 or higher.
How to update NodeJS to last version?
First, you will check your node version in your terminal.
node --version
If your current NodeJS is under 12.13.0, you can upgrade NodeJS following this post.
In this tutorial, we will use Tailwind CLI to install Tailwind CSS. This way, we can use the Tailwind CLI tool to generate our CSS without configuring PostCSS or PurgeCSS or installing Tailwindcss as a dependency.
We will use npx command which is installed alongside with npm version 5.2 and higher. The npx command is very handy since you don’t need to create the script in package.json before running the libraries from the node_module folder or running the other libraries that don’t install in node_module folder.
In Part 2, we will add our custom color for our landing page. So we will need to create our own CSS source file in src folder and create our tailwind configuration file at the root folder(tailwind-lp folder). We will store the built CSS file in dist folder. Our file structure should look like this.
|- tailwind-lp
|– dist/index.html
|– dist/style.css (we will generate later)
|– src/tailwind.css (we will create next)
|– tailwind.configure.js (we will generate later)
Tailwind.css
Under tailwind-lp folder, create new src folder and create new tailwind.css. In tailwind.css, we will add the @tailwind directive which includes Tailwind’s base, components and utilities styles.
/* ./src/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Learn more about @tailwind directive we add into our tailwind.css from below.
Generate style.css
Next, we will generate the built CSS file from our tailwind.css. We use npx to run tailwindcss library as shown below.
npx tailwindcss -i ./src/tailwind.css -o ./dist/style.cssHere is the result you get from running the command.
|- tailwind-lp
|– dist/index.html
|– src/tailwind.css
|– dist/style.css
|– tailwind.configure.js
In your “dist/style.css“, you will see the Tailwind CSS that is generated from @tailwind directive we add in “src/tailwind.css“. The style.css file size is around 3910kb. Follow along with my tutorial, I will show you how to reduce the file size.
In our custom CSS file (src/tailwind.css), we can add any custom classes we want in here. Then we just build the new CSS using npx command again.
Later on, I will show you how to add watch mode into npx command. So you don’t need to run the command every time you add the changes to source CSS file.
Create tailwind configuration file
Since we want to add new color into Tailwind configuration file which we will do in Part 2, we will create a tailwind.config.js using Tailwind CLI tool as shown below.
npx tailwindcss initThis init command will create a minimal tailwind.config.js at your root folder(tailwind-lp folder) as shown below.
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Create tailwind configuration file with different name
If you want to create the tailwind config file with different name, you can do.
npx tailwindcss init tailwindcss-new.config.jsThen you can run the build command and pass “-c” option as shown below.
npx tailwindcss -i ./src/tailwind.css -c ./tailwind-new.config.js -o ./dist/style.cssEvery time we build the CSS file, Tailwind will look for tailwind.config.js. If no configuration found, Tailwind will generate the CSS file using tailwind default configuration.
Style.css
After building the style.css, we will add style.css into our index.html.
<!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">
<link rel="stylesheet" href="style.css">
<title>Tailwind CSS - Simple Landing Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>Now you will see the result by right clicking at index.html in VS code and choose “Open with Live Server” menu which is the Liver Server extension we installed in VS Code earlier.
Modern Normalize
On the new browser preview, you will see the page is reset based on modern-normalize which is a normalize browsers’ default style. This way, your templates are ready for fully customize for your project by Tailwind. The default style is done by Tailwind’s base directive that we add into tailwind.css.
Remove unused CSS by PurgeCSS
With PurgeCSS, it helps to remove the unused CSS from the built CSS version. PurgeCSS works by scanning the templates we specific in tailwind.config.js. This way, our built CSS version will be a small file.
With Tailwind, you don’t need to configure with PurgeCSS, you just specific the templates you want to scan in taiwind.config.js.
Next, we will add our index.html into purge option in tailwind.config.js as shown below. That means we want PurgeCSS scanning the index.html and other html files then remove the unused style from those templates.
Note that, this list should include any files in your project that reference any of your styles by name. For example, you have a JS file that refers some Tailwind classes in your HTML, you should include that file in this list as well.
module.exports = {
purge: [
'./dist/**/*.html', // add an array of paths to all of your template files here
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Now we can compile our CSS with “NODE_ENV” and set to “production“, Tailwind will automatically purge unused styles from our CSS. Pretty cool, right!
NODE_ENV=production npx tailwindcss -i ./src/tailwind.css -o ./dist/style.cssPurgeCSS with other CSS framework
On a side note, you can integrate PurgeCSS with other CSS framework such as Bootstrap as well. But Tailwind just uses it for you under the hood.
Before we build the style.css without purge option, we have the built CSS file which is around 3910 kb(You may have different file size). After we add purge option and built CSS file again, the built CSS file is down to 9kb. Because currently we don’t use any Tailwind CSS style in index.html yet.
PurgeCSS doesn’t remove unused @keyframes rules by default. You can remove @keyframes by using PurgeCSS’s keyframes option as shown below.
module.exports = {
purge: {
content: ['./src/**/*.html'],
options: {
keyframes: true,
},
},
...
}
Create the minify file by cssnano
We will create a minify version for our built CSS file using “–minify” option. With minify option, cssnano will remove space and new line from our built CSS file. The result is the built CSS file smaller. Meaning the page will load faster for end-user.
NODE_ENV=production npx tailwindcss -i ./src/tailwind.css -o ./dist/style.css --minifyWatching for changes
For fast development, we will add watch mode using “–watch” or “-w” flag to the build command. It will watch any changes in tailwind.css which is our source CSS file and automatically rebuild our built CSS file.
NODE_ENV=production npx tailwindcss -i ./src/tailwind.css -o ./dist/style.css --minify --watchNow in terminal, it is watching the changes from “src/tailwind.css” for you. If you make any changes in tailwind.css, it will rebuild the built CSS file automatically.
To kill watch mode, just hit `Ctrl+c` in the terminal.
If you use watch mode for a while, it may crash. What you will do if it crashes, you just kill watch mode and run the command again.
Final file structure
Finally, our file structure will look like this.
|- tailwind-lp
|– dist/index.html
|– dist/style.css
|– src/tailwind.css
|– tailwind.configure.js
The tailwind-lp is our root folder. The index.html is our main project file. The tailwind.css is our Tailwind CSS source file and style.css is our built CSS file which will use in production.
Wrap up
In Part 1, we install Tailwind CSS via tailwind CLI. We create the tailwind configure file which we will use in Part 2. We learn how to use PurgeCSS, autoprefixer(Tailwind automatically runs your CSS through Autoprefixer by default), watch mode and minify the built CSS file. In Part 2, we will start to build our sample landing page with Tailwind CSS. Stay tune!
