How to setup the tailwindcss in your next HTML project ?
Tags: tailwindcss, css, html, vite
Published: 2024-04-29 19:58:00

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.

![to create vite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5dtei1brc1asux6a8rl3.png)

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.

![command line](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmfbj9snlemgeq04fcqv.png)

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.

![Vite pop up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qh1ysbro238ndktcjz9f.png)

`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.

![html-file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/egcwktbj6ios44l0fsr0.png)


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

![my-project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4kt1hnr9d90dqe93o5v5.png)



Whoa, our project is running.