Steps to Create a React App and Installing Required Module
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.
Table of Content
- Creating Custom Utility Classes Using Tailwind ‘Extend’ Option
- Creating Custom Utility Classes Using ‘@layer’ directive
Contact Us