How To Use Tailwind In Vite
Tags: javascript, webdev, programming, tutorial
Published: 2023-07-06 09:55:14

##Introduction
Creating a project can be quite daunting as we know it, now creating a project using a new technology could be one of uttermost difficulty. Technology as we know of now is evolving and it could be quite a task to keep up with these trends. 

[Vite](https://vitejs.dev/) has been introduced as a technology that helps with the run time and creating a react application using `create-react-app `. As developers we often make use of css in the design of websites, but as we know it there have been recent developments of css frameworks such as tailwind that help in efficient development.

##Installation

To get started with, [vite](https://vitejs.dev/) has to be started in the terminal using this code sample:

**With npm**

```javascript
npm create vite@latest
```
**With yarn**

```javascript
yarn create vite
```
**With PNPM**

```javascript
pnpm create vite
```

A user could also decide to use templates using the following code:

**npm 6.x**
```javascript
npm create vite@latest my-vue-app --template vue
```

**npm 7+, extra double-dash is needed:**
```javascript
npm create vite@latest my-vue-app -- --template vue
```

**yarn**
```javascript
yarn create vite my-vue-app --template vue
```

**pnpm**
```javascript
pnpm create vite my-vue-app --template vue
```
##Getting Started

To get started with [vite](https://vitejs.dev/), I have also included images that will be helpful in navigating the process in installation as follows:

The image below showcases the first process in using [vite](https://vitejs.dev/) which is choosing the project name as follows:

![An image showcasing how to choose a project name in vite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v97k6qw8c69jm5ij766u.png)

Below we can see the second process, which involves choosing the package name:


![An image showcasing how to choose a package name in vite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4feusrc09od3wgjk9x76.png)

We can also see the process of choosing the framework being used as follows:

![An image showcasing how to choosing a framework in vite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8qrzhws5f6u9q9r8v01.png)

After selecting a framework, the user will v=be asked to choose a language desired in being used: 

![An image showcasing how to choosing a language in vite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fzv1ndrgmlpsqos6au8t.png)

Finally, we can then see that our application has been created and we can then carry out the final process of running the application showcased below:

![An image showcasing the final step in creating a recat application using vite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u20y41ivlzim9u8x6fxj.png)

Below is an image showing the folder containing the files created using vite:

![an image showing the folder containing the files created using vite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45d6u21xz2hh3un9sye7.png) 

##Installing and using Tailwind

As earlier mentioned, tailwind is a CSS framework, created to help in a better experience for the users and also for the developer. To install tailwind, the following processes should be carried out:

**Install Tailwind CSS**

Install [tailwindcss](https://tailwindcss.com/) and then generate your `tailwind.config.js` and `postcss.config.js` files as follows:

```javascript
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

```

**Configuring the template paths**

The next step is setting the paths to the template files in your `tailwind.config.js` file.

```javascript
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

**Adding the Tailwind directives to your CSS file**

After configuring the path the next step is to add the `@tailwind` directives for each of Tailwind’s layers to your `./src/index.css` file as shown:

```javscript
@tailwind base;
@tailwind components;
@tailwind utilities;
```

**Starting the build process**

Run your build process using npm run dev

```javscript
npm run dev
```
**Using Tailwind in your project**

You can then start using Tailwind’s utility classes to style your content:

```javascript
export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}
```

##Conclusion
In conclusion, vite and tailwind have have been received by the developer community and it is important to note that there have been numerous complains on [stackoverflow](https://stackoverflow.com/) about the above not working for specific individuals. And if you notice this, it's important to ensure the `tailwind.config.js` file is changed to `tailwind.config.cjs` as shown in the image below. 

![An image showcasing an alternative way of naming files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwhup36vmn35tpjzlsvn.png)

Happy coding !