Configure your React + Vite Application for Tailwind CSS

Introduction

Tailwind is a sizable collection of tiny CSS utility classes for rapidly and reliably creating attractive websites. Frameworks like Antd, Bootstrap and Material Design have high-level components like buttons, cards, grids, menus and forms to create different components, Tailwind provides a more practical approach by giving you utility classes that can be used to create components similar to these. This approach gives you significantly more creative freedom than other CSS frameworks while still sticking to a design structure that you wouldn’t obtain with pure CSS. [Ref]

Let’s start with creating a React typescript application with Vite naming it tailwind-client, if you have an existing project start from the Tailwind Configuration Setup section.

Initial Setup

npm create vite@latest tailwind-client -- --template react-ts 

After creating the react application, install all the dependencies using the following command.

cd tailwind-client
npm install 

Tailwind Configuration Setup

Now inside the application folder, we have to install tailwindcss along with its corresponding dependencies postcss and autoprefixer using the following command and later generate both tailwind.config.js and postcss.config.js configuration files.

npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p

Now configure the tailwind.config.js and index.css (in src folder) file in the following way.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

src/index.css

Append the following lines at the top of the file index.css

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

Yay!! We are all set up to start exploring tailwindcss. If you are using VS Code, consider installing the Tailwind CSS IntelliSense Extension to get inline suggestions while development.