Steps to Create a React App and Installing Required Module

Folder Structure:

Step 1: Create a new react application and enter it into the directory by running the following commands in the terminal

npx create-react-app tw-custom-utility
cd tw-custom-utility

Step 2: Install tailwind CSS and initialize the tailwind configuration file by running the following commands.

npm i tailwindcss
npx tailwindcss init

Updated Dependencies: The updated package.json file should look like this

 "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "tailwindcss": "^3.4.1",
    "web-vitals": "^2.1.4"
 }

Creating Custom Utility Classes in Tailwind CSS and React JS

Tailwind CSS empowers development with a variety of utility classes out of the box, helping us in rapid development and consistent styling. However, In some scenarios, you might want to implement your custom styling.

We will discuss the following approaches to create Custom Utility Classes in Tailwind and React.

Table of Content

Creating Custom Utility Classes Using Tailwind ‘Extend’ Option
Creating Custom Utility Classes Using ‘@layer’ directive

Tags:

#CSS #ReactJS #Tailwind CSS #Web Technologies

Folder Structure:

Steps to Create a React App and Installing Required Module

Creating Custom Utility Classes in Tailwind CSS and React JS

Similar Reads