Set up a fresh React project with TailwindCSS

s 

The most popular utility-first CSS framework at present time is Tailwind CSS. To streamline the development process and create scalable & responsive web application, it has become a preferred choice by the developers. A lot of ReactJs developers also prefers TailwindCSS because of its unique approach to styling.

Let's learn how to set up a fresh React project with Tailwind CSS to boost your coding experience. 

Setting Up the React Project: 

Let's first set up a ReactJS project with Vite. If you are not familiar with it, you can read my article about Initialising a ReactJS project with Vite.

As we set up our fresh React project successfully, let's add TailwindCSS to it.

Install TailwindCSS and other dependency libraries: 

React query doesn't come with the default Tailwind setup, so install it and other relevant dependencies with the following command. 

npm i tailwindcss postcss tailwindcss-cli postcss-cli autoprefixer concurrently

Set up TailwindCSS: 

While the installation is done, on the terminal type the following command: 

npx tailwindcss init -p

Two new files named tailwind.config.js  & postcss.config.js will be created upon successful execution. Inside the tailwind.config.js  file replace everything with the following code:

/** @type {import('tailwindcss').Config} */

export default {

content: [

"./index.html",

"./src/**/*.{js,ts,jsx,tsx}",

],

theme: {

    extend: {},

},

plugins: [],

}

In the src  folder create two new files named input.css  & output.css (you can name it as you like it).

Inside the input.css paste the following code:

@tailwind base;

@tailwind components;

@tailwind utilities;

Now, go to package.json and replace the script object with the following:

"scripts": {

"dev": "concurrently \"vite\" \"npm run watch-twind\" ",

"build": "vite build",

"preview": "vite preview",

"watch-twind": "postcss ./src/input.css -o ./src/output.css -w",

},

We have successfully integrated TailwindCss into our React Vite project. Import  output.css  file in the main.jsx file. 

To check if Tailwind is working, go to App.jsx file and erase everything inside the return() block. Then, write a simple hello inside an h1 tag like the following code and add some TailwindCss class just like the following:

function App() {

return (

<>

        <h1 className="text-red-700 text-xl font-semibold">Hello Tailwindcss</h1>

</>

);

}

export default App;

You will see that the Tailwind classess are in effect. Now, create amazing React applications with eye-catchy design using TailwindCss and share with us for a view.

See you in another post. Have a nice day and a learning journey ahead.