Setting up a React Project with TailwindCSS

TailwindCSS is a popular utility-first CSS framework that allows developers to build modern and responsive designs directly in their markup. When combined with React, it provides a powerful way to create interactive, stylish UIs with minimal effort. In this article, I'll walk you through how to set up a new React project with TailwindCSS from scratch.

Prerequisites

To follow along, you should have the following installed on your machine:

Node.js (at least version 14.x)
npm or Yarn as your package manager (here we will use npm)
If you don't have Node.js installed, you can download it from the official website. Once you have Node.js installed, npm comes bundled with it, so you're good to go!

Step 1: Create a React Project

First, let's create a new React project. Open your terminal and run the following command:

npx create-react-app my-tailwind-react-app

This will create a new React app in a folder called my-tailwind-react-app. You can replace this with your preferred project name.

Once the installation is complete, navigate into your project folder:

cd my-tailwind-react-app

You can test if everything works by running:

npm start

This will start the development server and open your project in the browser.

Step 2: Install TailwindCSS

Now that we have a basic React project set up, it's time to install TailwindCSS. To do that, we need to install Tailwind and its dependencies.

In your project directory, run the following command:

npm install -D tailwindcss postcss autoprefixer

After that, generate a TailwindCSS configuration file by running:

npx tailwindcss init

This will create a tailwind.config.js file in your project directory. The default file will look something like this:

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

Step 3: Configure Tailwind to Remove Unused Styles

By default, TailwindCSS comes with all of its styles, which can make your CSS files quite large. To optimize the bundle size, we need to configure it to purge unused styles in production. This is done by adding the paths to all of your template files (like your React components) in the content array of tailwind.config.js.

Modify the tailwind.config.js to include all your React files:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

This configuration tells Tailwind to scan all the files inside the src directory with .js, .jsx, .ts, or .tsx extensions for Tailwind classes and remove the unused ones in production builds.

Step 4: Add Tailwind to Your CSS

Next, we need to import TailwindCSS into our project’s CSS file. Open the src/index.css file and replace everything with the following:

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

This imports Tailwind's base, component, and utility styles into your project.

Step 5: Start Using TailwindCSS in Your React Components

Now that TailwindCSS is set up, you can start using its utility classes in your React components!

For example, open src/App.js and update it like this:

function App() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="bg-white p-8 rounded shadow-md text-center">
        <h1 className="text-2xl font-bold text-gray-900">Hello, TailwindCSS!</h1>
        <p className="mt-4 text-gray-600">Start building your awesome React app now 🚀</p>
      </div>
    </div>
  );
}

export default App;

In this example, we've used several TailwindCSS utility classes to style our component without writing any custom CSS. You can quickly adjust the layout and appearance just by changing the classes.

Step 6: Build and Deploy

Once you're happy with your project and want to build it for production, simply run:

npm run build

React will generate optimized static files, and Tailwind will remove all unused CSS classes, ensuring your bundle is as small as possible.

You can then deploy your project to any hosting platform like Vercel, Netlify, or GitHub Pages.

Conclusion

Setting up React with TailwindCSS is quick and easy, and it allows you to build clean, responsive UIs without writing much custom CSS. With Tailwind’s utility-first approach, you can focus on designing your app’s interface directly in your JSX without leaving your code.

Happy coding!