TheLazy.Dev
Portfolio GitHub

Blog

react |tailwindcss |javascript |webdev

Set Up Tailwind Css With create-react-app and yarn

ashirbadgudu

Ashirbad Panigrahi

Posted on January 1, 2022

Set Up Tailwind Css With create-react-app and yarn

Create a new react project with yarn 

yarn create react-app react-tailwind-css-stater
Enter fullscreen mode Exit fullscreen mode

Install Tailwind CSS with postcss & autoprefixer 

yarn add -D tailwindcss postcss autoprefixer
Enter fullscreen mode Exit fullscreen mode

Generate tailwind.config.js and postcss.config.js 

yarn tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

Modify tailwind.config.js file 

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

Add tailwind base, components and utilities to index.css 

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

GitHub Repo

💖 💪 🙅 🚩
ashirbadgudu
Ashirbad Panigrahi

Posted on January 1, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

40+ Frontend UI Components
react 40+ Frontend UI Components

September 20, 2024

Set Up Tailwind Css With vite-react-app and yarn
react Set Up Tailwind Css With vite-react-app and yarn

April 23, 2023

Responsive sidebar using React and Tailwind with dark mode and react-router
react Responsive sidebar using React and Tailwind with dark mode and react-router

May 15, 2022

Set Up Tailwind Css With create-react-app and yarn
react Set Up Tailwind Css With create-react-app and yarn

January 1, 2022

build a tic tac toe game | react | tailwind css | next js
react build a tic tac toe game | react | tailwind css | next js

December 31, 2021