How to Use Tailwind CSS in React

Last updated on May 7, 2022 Pennywise Loading... Post a comment

Tailwind is a popular open-source CSS framework that can help you rapidly build user interfaces. It works very nicely with React and you can style your apps without leaving your Javascript (or TypeScript) code, thanks to Tailwind’s utility classes.

This succinct article shows you how to integrate Tailwind CSS into a React project. Without any further ado, let’s get started.

The Steps

1. Initialize a new React project:

npx create-react-app kindacode-example

The name is totally up to you.

2. Install required packages: tailwindcss, postcss, and autoprefixer:

npm i -D tailwindcss postcss autoprefixer

3. Create configuration files by executing the following command:

npx tailwindcss init -p

Two new files will be generated in the root directory of your project: tailwind.config.js and postcss.config.js.

4. Open tailwind.config.js then add the paths to template files, like so:

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

5. Open your src/index.css and add the following to the very top of the file:

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

Screenshot:

Now everything is ready. Unlike MUI (Material UI) or Ant Design, you can use all Tailwind CSS utility classes without importing any JSX components. For more clarity, have a glance at the example below.

Example

Screenshot:

The code:

function App() {
  return (
    <div className="p-20">
      <div className="w-96 h-48 bg-blue-500 drop-shadow-lg rounded flex justify-center items-center">
        <p className="font-extrabold text-2xl text-white">KindaCode.com</p>
      </div>
    </div>
  );
}

export default App;

You can learn more about Tailwind in its official docs.

Conclusion

You’ve learned how to set up Tailwind CSS for a React project created with create-react-app. If you want to add Tailwind to a Next.js project, see this article: How to use Tailwind CSS in Next.js.

The world of front-end changes quickly with cutting-edge advancements to increase the productivity and product development experience of developers. Keep the ball rolling and continue exploring more new things by taking a look at the following articles:

You can also check our React topic page and Next.js topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles