Configure your React + Vite Application for Tailwind CSS

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.

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.

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.

 

Picture of Abdus Sayef Reyadh

Abdus Sayef Reyadh

Software Engineer-II

Hire Exceptional Developers Quickly

Share this blog on

Hire Your Software Development Team

Let us help you pull out your hassle recruiting potential software engineers and get the ultimate result exceeding your needs.

Contact Us Directly

Address:

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

Talk to Us
Scroll to Top