Installing Tailwind CSS with React 18 and Vite

Introduction

Tailwind CSS is a low-level framework. Meaning, unlike other CSS frameworks like Bootstrap and Materialize, Tailwind doesn’t offer fully styled components like buttons, dropdowns, and navbars. Instead, it offers utility classes so you can create your own reusable components.

Is Tailwind Better than Bootstrap?

Tailwind CSS excels in customization and flexibility due to its utility-first approach, allowing developers to create unique designs effortlessly. Bootstrap offers a more structured and opinionated approach, which might not suit projects requiring extensive customization.

Do I Need to Learn CSS Before Tailwind?

While it is not mandatory to be a CSS expert before diving into Tailwind CSS, having a foundational understanding of CSS can be immensely beneficial. Tailwind CSS is built upon the principles of CSS and assumes that users possess a basic grasp of CSS concepts. CSS, or Cascading Style Sheets, serves as a stylesheet language utilized for defining the appearance and formatting of HTML documents.

Getting Started with Tailwind CSS in Your React Project

Follow the step-by-step guide below to integrate Tailwind CSS into your React project scaffolded with Vite and harness the power of Tailwind’s CSS classes for styling.

Step 1: Creating your React Vite Project.(Scaffolding React with Vite)
The initial step involves creating a React Vite application. Open your terminal or command prompt and execute the following commands, then follow the prompts:

If you are using npm:

npm create vite@latest

If you are using yarn:

yarn create vite

If everything works fine, you should be able to see the following output:

Step 2: Navigate to your Project directory

Now that your React Vite application is created, navigate to the newly generated project directory.
cd into the newly created project directory, mine is tailwind-tutorial, so that we can install Tailwind.

$ cd tailwind-tutorial

Step 3: Installing tailwind and other dependencies

Now that you have entered the newly created project folder, you can start adding the Tailwind CSS library and it’s peer dependencies postcss and autoprefixer by using the Node Package Manager (NPM) in the following way:
This will install:

• The Tailwind CSS framework
• Post CSS, which provides plugins to perform different functionalities like prefixes in Vanilla CSS
• Autoprefixer, which is a PostCSS plugin to parse CSS and add vendor prefixes to CSS rules.

$ npm install -D tailwindcss postcss autoprefixer

Confirm that you have the above 3 items in your package.json.

Step 4: Generate Configuration Files
In order to configure everything we need for Tailwind in our React project we do need two configurations files:

• tailwind.config.js
• postcss.config.js

Luckily those two files can be generated by executing the following command in the project folder

$ npx tailwindcss init -p

They help you interact with your project and customize everything.

Step 5: Configure source/template paths.
Inside tailwind.config.js we need to specify the path to our React template files by doing configuration setting.

Your tailwind.config.cjs looks like this for now:

Step 6: Adding Tailwind CSS Directives to your CSS file
Add the following Tailwind CSS directives into file index.css or App.css or your most parent css file:

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

Your index.css or App.css file contains some default styling. You can clear all that and paste the three lines of directives above.

@tailwind base injects Tailwind's base styles and base styles registered by plugins, @tailwind components injects Tailwind's component classes and component classes registered by plugins, while @tailwind utilities injects Tailwind's utility classes and utility classes registered by plugins.

That’s it. We’re ready to go! Let’s make use of Tailwind’s CSS classes within our main React component in App.js.

Step 6: Using Tailwind within our App
By now, I know you have crafted your own html elements within App.js, or you still have default elements.
Replace the default code in src/App.js with the following implementation to see how tailwind is written.

function App() {
  return (
    <>
      <h1 className="text-blue-700 font-bold  text-normal">
        Welcome to Tailwind CSS Installation Tutorial.
      </h1>

      <div className="flex justify-center pt-20">
        <div className="max-w-sm bg-white border border-gray-200 rounded-lg">
          <a href="https://tailwindcss.com/">
            <img
              className="rounded-t-lg w-full"
              src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyOJKdBGCpTCfxJGAaZHhwqN5k0jD1jvHOzWE6kq84ksnVgQbpqF2G3IO7NLZrJL9lp2I&usqp=CAU"
              alt="tailwind image"
            />
          </a>
          <div className="p-5">
            <p className="mb-3 font-normal text-gray-700">
              Rapidly build modern websites without ever leaving your HTML.
            </p>
            <a
              href="https://tailwindcss.com/"
              className="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800">
              Read more
              <svg
                className="w-3.5 h-3.5 ml-2"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 14 10">
                <path
                  stroke="currentColor"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokewidth="2"
                  d="M1 5h12m0 0L9 1m4 4L9 9"
                />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </>
  );
}

Start the development web server by using the following command:

$ npm run dev

You should then be able to see the following result in the browser:

Conclusion
By following these steps, you have successfully integrated Tailwind CSS into your Vite-based React application. Tailwind CSS offers a versatile and efficient approach to crafting custom and responsive web designs. Enjoy exploring Tailwind CSS and creating stylish and functional web applications.

Thank you for reading this article. If you found it informative and valuable, please consider sharing it with fellow enthusiasts of Tailwind CSS. Your support can help disseminate knowledge and benefit the broader community of developers.

Follow me on LinkedIn , Github, and on X.

George is an experienced Fullstack developer who has accumulated 1.5 years of expertise in utilizing Tailwind CSS.