Tailwind & React

Tailwind CSS is a popular utility-first CSS framework that allows you to quickly build designs by composing utility classes directly in your markup.

It provides a low-level set of utility classes that you can use to style your elements without writing custom CSS.

Setup & Usage

You may consult the Tailwind framwork guides to understand how it can be incorporated into the framework you’re using and to learn more about its utility classes.

Mentioned below are the steps for Create React App,

1. Create your project

npx create-react-app my-project
cd my-project

2. Install Tailwind CSS

npx create-react-app my-project
cd my-project

3. Configure your template paths: This configuration specifies that Tailwind should analyze the files with pattern *.{js,jsx,ts,tsx} to generate the styles.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

4. Add the Tailwind directives to your CSS

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

5. Start your build process

npm run start