How to setup the tailwindcss in your next HTML project ?

In this article of mine, I will be showing you how to install tailwindcss in your next HTML projects. From there we can explore the ways of installing tailwindcss.

Being a utility first css framework packed with classes, tailwindcss helps to create website in your markup language-HTML.

It is not only restricted to utility approach but also a component approach which treat every element as a whole and apply styles to them.

Before we dive in the creating our project, we need set up our installation environments.

First we create a folder called the my_projects or use any project title and open the folder on your code editor, I personally use Visual studio code editor.
Open the terminal on your code editor and make sure you are in the right folder which is my_project folder.
In the terminal you will add this command below, to create a development environment for the projects.

After the command is clicked, an extension of the command continues to ask for a name for the project. Since we have one, we specify by using "./" to navigate in the same folder we have previously created.

This will create extension that will inform us on the type of framework to use, since we will be using little JavaScript in our project, we will select vanilla. Which will take us to select either vanilla JavaScript or vanilla Typescript. We select the vanilla JavaScript.

After doing that this below will pop up and then we run the following command.

npm install

This is to help install the necessary installation packages including package.json files.
Moving on, we will have to install the tailwindcss package which will be used in styling the website.

Following commands should be pasted on the terminal one after the order to help in the installation of the tailwind packages.

npm install -D tailwindcss

npx tailwindcss init

The above commands will help in creating the tailwind.config.js file that will be used to create custom styles that may be in the m-project folder. You can copy and paste these code below to replace the ones on the tailwind.config.js.

`
/** @type {import('tailwindcss').Config} /
module.exports = {
content: [".//.{html,js}"],
theme: {
extend: {},
},
plugins: [],
};

`
Then create an dist folder in the root folder of the my-project folder, and since the style.css is present with the vite installation. You will have to add the code below.


@tailwind base;
@tailwind components;
@tailwind utilities;

You make sure you add this code below in the package.json file like this
`{
"name": "my-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "npx tailwindcss -i ./style.css -o ./dist/output.css --watch",
"preview": "vite preview"
},
"devDependencies": {
"tailwindcss": "^3.4.3",
"vite": "^5.2.0"
}
}

Run the following command below in the terminal to help scan the classes available on the mark up language.

npx tailwindcss -i ./style.css -o ./dist/output.css --watch

You then add this link below in the index.html file
<link href="dist/output.css" rel="stylesheet">
Make some changes in the main.js file like this.

Then run npm run build to build the project for production and npm run dev simultaneously to start the project

Whoa, our project is running.