Tailwind CSS React Tutorial

If you're planning to build a React application, Tailwind CSS can make your life easier. It has a library of opinionated utility classes that can help you create beautiful and consistent styles for your components. It also makes it easy to integrate existing classes and styling into your React app. To get started, open the react-tailwind folder in a text editor. After that, you need to configure the Tailwind CSS to work with your React application.

Tailwind CSS is a utility-first CSS framework that allows developers to design custom web components without switching to HTML. Once you've installed the library, you can use it to build a simple React page. Unlike Bootstrap and Foundation, which give you pre-defined components and default styles, Tailwind CSS gives you the freedom and flexibility to design and customize components however you wish.

In this tutorial, we demonstrate how to integrate Tailwind CSS in a React project.

Create React project

Run the commands below to create a React project:

npx create-react-app react-app-with-tailwind
cd react-app-with-tailwind

Install Tailwind CSS packages

Run the command below to install Tailwind CSS packages:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure template paths

Configure the templates files' paths in the tailwind.config.js file:

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

The content sections should contain the paths to all the files that might use Tailwind CSS.

Add the Tailwind directives to your CSS

Add the @tailwind directives to the resources/css/app.css file:

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

Use Tailwind CSS in React project

Replace the code in src/App.js with the following content:

function App() {
  return (
    <div className="container mx-auto bg-gray-200 rounded-xl shadow border p-8 m-10">
      <p className="text-3xl text-gray-700 font-bold mb-5">
        Welcome!
      </p>
      <p className="text-gray-500 text-lg">
        React and Tailwind CSS in action
      </p>
    </div>
  );
}
export default App;

Run the command below to start the development server:

npm run start

Now you should be able to see an HTML page powered by Tailwind CSS.