Configure your React + Vite Application for Tailwind CSS


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.

Tailwind CSS in Action

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.


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


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.

Abdus Sayef Reyadh

Software Development Engineer II

Published: July 17, 2023

UPD: July 20, 2023

Get In Touch


The power of Technology

is now at your disposal


Plot # 272, Lane # 3 (Eastern Road)
DOHS Baridhara, Dhaka 1206


+880 1730 3586 45


Our Experts are Ready to Help You


    Contact Us Directly


    Plot # 272,
    Lane # 3 (Eastern Road)
    DOHS Baridhara, Dhaka 1206

    Talk to Us

    +880 1730 3586 45