# Tailwind CSS v4 Setup Example: A Complete Step-by-Step Guide

Frustrated with Setting Up Tailwind CSS v4?

Discover the Simple Steps to Get Your Project Up and Running!

Tailwind CSS recently launched its fourth version, which introduces significant updates that enhance developers' ability to configure and style their applications.

This new version brings many improvements designed to make the setup process smoother and more intuitive compared to earlier versions.

With Tailwind CSS v4, you can use an expanded set of utilities and configuration options that allow for greater flexibility and customization.

Whether you're working on a small project or a large-scale application, the new features in this version aim to simplify your workflow and reduce the time spent on styling.

By following a few straightforward steps, you can quickly integrate Tailwind CSS v4 into your project, enabling you to focus more on building and less on setup challenges.

## Tailwind CSS v4 Setup Guide 

***checkout:*** [*Tailwind CSS v4*](https://tailwindcss.com/)

**Step 1.** Open your Visual Studio Code.

**Step 2.** Initialise your react application with Vite.

```bash
npm create vite@latest
```

![Project Initialise with Vite](https://cdn-images-1.medium.com/max/1200/1*M9Hjl4ag0jCx0lcVhMvZZw.png align="left")

**Step 3.** Next, Install the Tailwind CSS npm package.

```bash
npm install tailwindcss @tailwindcss/vite
```

![](https://cdn-images-1.medium.com/max/1200/1*ekPWhzwjOLMzTUds0iUaOA.png align="left")

**Step 4.** Go to the **vite.config.js** file and import tailwind CSS. The syntax is given below

```bash
import tailwindcss from '@tailwindcss/vite'
```

![](https://cdn-images-1.medium.com/max/1200/1*QCLP9KvLy54iTNzzHfkEQg.png align="left")

**Step 5.** Add Tailwind CSS with react in the defineConfig function.

![](https://cdn-images-1.medium.com/max/1200/1*TssfigfHWNNeP9gbyTpRPg.png align="left")

**Step 6.** Now go to the App.css file in the src folder.

![](https://cdn-images-1.medium.com/max/1200/1*VLx4KBH7rIZ9G_uu7CkKFQ.png align="left")

**Step 7.** Import tailwind CSS in the CSS file

```bash
@import "tailwindcss";
```

![](https://cdn-images-1.medium.com/max/1200/1*sCw7dv8V-SFPXYrpHl1SlQ.png align="left")

## How to Add Custom Font in Tailwind CSS v4

Adding custom font in tailwind CSS is easier than the previous version. Just follow these simple steps to add fonts.

**Step 1.** Go to Google Fonts and search for your font.

**Step 2.** Then click on the **Get Font** button.

![](https://cdn-images-1.medium.com/max/1200/1*i8uW09FbmFX4LlHY8JY9eg.png align="left")

**Step 3.** After that next page will open where you have to click on the **Get Embed Code** button.

![](https://cdn-images-1.medium.com/max/1200/1*noBvbaXKUG6v8dMafmUlmw.png align="left")

**Step 4.** Then, copy the font embed code

![](https://cdn-images-1.medium.com/max/1200/1*VsEX3jwF81ABO3umoHh45g.png align="left")

**Step 5.** And paste it into the index.html file under the link tag.

![](https://cdn-images-1.medium.com/max/1200/1*YFZq7WVQeBNUA6VmXvY5MA.png align="left")

**Step 6.** Go to the **app.css** file.

**Step 7.** Add font configuration like this.

```bash
@import "tailwindcss";
@theme {
 - font-display: "Kaushan Script", serif;
}
```

**Note:** use **— font display** as a key and its value will be your font name.

## Conclusion

In conclusion, setting up Tailwind CSS v4 is an easy process. By following the step-by-step guide provided, you can easily integrate Tailwind CSS v4 into your project, allowing you to focus more on building and less on the complexities of styling.

Additionally, the process of adding custom fonts has been simplified, making it easier to personalize your application's design. Embrace the new features of Tailwind CSS v4 to create responsive and visually appealing applications efficiently.