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

Step 1. Open your Visual Studio Code.

Step 2. Initialise your react application with Vite.

npm create vite@latest

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

npm install tailwindcss @tailwindcss/vite

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

import tailwindcss from '@tailwindcss/vite'

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

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

Step 7. Import tailwind CSS in the CSS file

@import "tailwindcss";

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.

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

Step 4. Then, copy the font embed code

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

Step 6. Go to the app.css file.

Step 7. Add font configuration like this.

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