Tailwind CSS and React are popular frontend development tools that kickstart the development of your websites and apps. Here's how to create new projects with Tailwind and React, as well as how to use Tailwind CSS in your existing React apps.

Why React?

React is a JavaScript library that helps you build user interfaces for web and mobile applications. It lets you build your frontend interfaces using reusable components, speeding up development and making code easier to maintain.

Its declarative syntax uses JSX (JavaScript XML), which lets you include your component markup directly in your JavaScript files. React's use of the Virtual DOM makes UI updates efficient and reduces the amount of code you need to write to change on-page elements.

React is incredibly popular as it improves software development workflows and makes it easier to write and maintain high-quality code, all of which means developers can spend more time building great user experiences.

If you're new to React, check out the Contentful React Starter.

Why Tailwind CSS?

Tailwind CSS is a CSS framework that provides you with utility classes to speed up the development of responsive websites and app front ends. It is a lightweight framework: rather than providing pre-defined components (like buttons and lists) that dictate how your applications will look and feel, it provides utilities that take away the common annoyances of writing CSS (like centering things, setting consistent margins and padding, and creating grid layouts).

An example of some common page layout elements implemented using the default Tailwind CSS in React.

A utility in Tailwind is a pre-defined CSS class with a single purpose that you can use to compose styles directly in HTML.

Here's an example of Tailwind CSS utility classes being used to style a div:

<div class="bg-white p-6 rounded shadow-lg text-gray-700">

This replaces having to define your own CSS classes and rules in a stylesheet. The above Tailwind CSS classes would look like this if manually implemented in CSS:

How to use Tailwind CSS in React

Here's how to use Tailwind CSS in React when starting a new project. You'll need to install Node.js to follow these tutorial steps.

Step 1: Create a React project

First, create a new React project using create-react-app by running the following command:

npx create-react-app my-app

Replace my-app with the name of your new project. If you want to create a React app that's ready to use with the Contentful composable content platform, you can use create-contentful-app instead:

npx create-contentful-app my-app

create-contentful-app lets you get started on building your React apps with a Contentful back end, immediately using the development tools you're already familiar with. You can develop locally, and then deploy your app to the Contentful platform with a single command.

Step 2: Install and configure Tailwind CSS

Next, install Tailwind CSS, PostCSS, and Autoprefixer in your React app's project directory:

cd my-app

npm install tailwindcss postcss autoprefixer

As well as Tailwind, a couple of other dependencies are installed with this command:

• PostCSS is used for processing CSS to generate the final, minified CSS file for deployment.

• Autoprefixer is a PostCSS plugin that adds vendor prefixes for better compatibility across different web browsers.

Tailwind CSS is configured using the tailwind.config.js file in the project root. Create it by running:

npx tailwindcss init

One of the big benefits of Tailwind CSS is that it can remove any unused classes to reduce the size of your CSS file, and speed up page load times. 

To do this, you need to update tailwind.config.js to include the paths to your React components in the content property. Tailwind can now scan these files for class names and remove any unused ones.

Finally, you'll need to import Tailwind CSS's pre-defined styles. Create a CSS file at src/tailwind.css and add the following Tailwind CSS directives:

@tailwind base;

@tailwind components;

@tailwind utilities;

Import this CSS file into React by adding it to your imports at the top of src/index.css or src/index.js:

Step 3: Use Tailwind CSS in your React project

You're now ready to start building with Tailwind CSS and React! To begin working with an example React component that uses Tailwind CSS, create a file in your src directory called RedButton.js:

You can then use this RedButton component in your main src/App.js component:

The above React component displays a centered red button. Note that no CSS has actually been manually written; all of the positioning, colors, and layout have been implemented entirely using Tailwind CSS classes.

You can launch your React app to see how it looks by running:

npm start 

How to install Tailwind CSS in React for existing projects

To install Tailwind CSS in React for existing projects, just follow the instructions above from step 2 onwards.

Your existing React components and CSS styling will all work once Tailwind is installed in your existing React project (provided you haven't used any custom CSS class names that conflict with those used by Tailwind CSS), so you can gradually overhaul your user interface to use the Tailwind CSS utility classes, and then use them in any new React components you build.

If you do use class names that conflict with Tailwind, you can set up a prefix for all Tailwind classes to make sure they are unique and distinct from your existing CSS code.

Tailwind CSS and React Native

Tailwind CSS itself cannot be used with React Native. React Native implements a different component system from regular React, that uses JavaScript for styling instead of CSS.

You can, however, use NativeWind to add Tailwind CSS functionality to React Native, including CSS variables, media queries, and animation across all React Native platforms (including iOS and Android).

A composable architecture deserves a composable back end

Tailwind CSS and React provide a solid, unopinionated foundation for building web and mobile applications. They allow you to skip a lot of boilerplate and build responsive, interactive applications that will work on any screen size.

You can extend the developer advantage offered by Tailwind CSS and React (and React Native) by using a composable content platform to manage and host all of the text, images, videos, and other media that power your digital experiences. Check out the Contentful Tailwind CSS- and React-powered blog tutorial to see how it all fits together.

Start building

Sign up for a free Contentful account

Use your favorite tech stack, language, and framework of your choice.

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.