How to set up Tailwind CSS 2.0?
A Step By Step Guide For Setting Up TailwindCSS Into Your Web Development Project
You must have come across this article while searching about the method by which you can set tailwind CSS 2.0 in your node project. This is the right place for you, so let’s get started with a small disclaimer before actually demonstrating the actual steps.
Disclaimer : This story is not contradicting the steps of installation described in the official documentation of Tailwind CSS . This is a Step by Step guide for the approach of setup the tailwind CSS in your web development project.
Prerequisite: node & npm should be installed globally on your system → (Here is the link) which is the only prerequisite for the setup.
Let’s start with the STEP by STEP guide for the project setup.
Step 1 :
Open an empty folder named as tailwindcss
in your favorite editor (mine is VS code) and create a node package.json
file by running the below command in the terminal of the editor.
npm init -y
This command creates and sets up a file named package.json
which contains the project information, all the dependencies required to run the project will also be stored here, and the script needed by npm
to run the project.
Step 2:
The next step is to install all the required dependencies for the project. Here is the npm install command for the same.
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
This command installs 3 packages as development dependency ( -D
the option is used to install development dependency for the project).
tailwindcss → npm link
postcss → npm link
autoprefixer → npm link
Open package.json the
file you will find all these packages inside devDependencies object.
Step 3:
In the root directory of the project, you need to create a file named postcss.config.js
file and add the below code into the same and save the file.
const cssnano = require('cssnano');module.exports = {
plugins: [
require('tailwindcss'),
cssnano({
preset: 'default',
}),
require('autoprefixer'),
]
}
Step 4:
Run the following command to create the tailwind config file.
npx tailwindcss init
This command creates a file in the root directory named as tailwind.config.js
and some config into the same file and replaces the below config into the same file.
module.exports = {
purge: {
node: 'layers',
content: ['./public/**/*.html'],
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
color: {}
},
},
variants: {
extend: {},
},
plugins: [],
}
Step 5:
Now we are done with the config part need to create some folders in the root folder and a file named tailwind.css
file inside src/css/
folder.
mkdir src
mkdir src/css
touch src/css/tailwind.css
Inside that tailwind.css
file needs to inject 3 base package of tailwind add the following lines of code into the file.
@tailwind base;
@tailwind components;
@tailwind utilities;
Step 6:
Now we need to make some changes in the script of package.json
file, so replace the config below in your scripts tag :
"scripts": {
"tw:build": "tailwindcss build ./src/css/tailwind.css -o ./public/css/tailwind.css"
}
Your package JSON file should look like the following one :
Step 7:
As the script to build the tailwindcss library is done we need to run the same in the editor terminal.
npm run tw:build
This command will generate CSS file into ./public/css/tailwind.css
with all the available CSS for your project use. Here is the project directory below would look something like this :
Step 8:
Now we are done with generating tailwind.css
file with the help of build of tw: build script from package.json
file. Now Inside the public/
folder create a root HTML file as index.html
and add your HTML basic structure into the same something like this :
<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, maximum-scale=1.0"><title>TailwindCSS 2.0</title><link rel="stylesheet" href="css/tailwind.css" /></head><body><div class="flex-column justify-center items-center h-screen"><div class="p-20 text-center"><h1 class="text-9xl">tailwindcss 2.0</h1><div class="bg-green-200 hover:bg-green-500 p-10 text-4xl">Is now live on server !!</div><div class="p-5 text-2xl"><a href="#" class="text-blue-500 hover:text-purple-700">How to set up this tailwind CSS 2.0 ?</a></div></div></div></body></html>
Below you can see the result for the same-
Hurrah !!😁 We are done with the installation with the tailwindcss 2.0 library …
Feel free to let me know your comments and any improvement you might feel to be added in the same or any error you are facing while doing the above setup.
Keep learning and sharing the same 😃
Will be back with a new story soon !! 🧑💻
Subham Singh
Feel free to connect with me on
Email ID: singhsubham510@gmail.com
twitter : @____subham____
LinkedIn: @subham-singh
Instagram: @_____subham_____
Don’t forget to follow The Lean Programmer Publication for more such articles, and subscribe to our newsletter tinyletter.com/TheLeanProgrammer