Creating Custom Utility Classes Using Tailwind ‘Extend’ Option

Creating Custom Utility Classes Using ‘@layer’ directive

Integrate Tailwind CSS for efficient styling.
We have made four boxes using <div> element with style including background color, text color, rounded corners, height, and width.
Now implement custom style, use “Extend” option to implement in tailwind.config.js file for colors.

Example: Illustration of creating a Custom Utility Classes in Tailwind CSS and React JS using the tailwind `Extend` Option

CSS

/* index.css */
 
@tailwind base;
@tailwind components;
@tailwind utilities;

Javascript

// tailwind.config.js
 
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      colors: {
        'blood-red': '#ff2200',
        'purple-extended': '#74207d',
        'parrot-feather' : '#bbff00',
        'lemon-yellow' : '#ffee00',
        'rose-pink' : '#ff0048'
      }
    },
  },
  plugins: [],
}

Javascript

// App.js 
 
function App() {
  return (
    <div className="App p-12">
          <h1 className='tracking-wide text-gray-600 text-3xl font-bold'>Custom Utility Colors Using Tailwind `extend`</h1>
          <div className='flex flex-wrap gap-4 mx-auto w-full flex justify-center p-12 rounded-md'>
              <div className='flex items-center justify-center text-gray-800 bg-lemon-yellow w-40 h-40 rounded-md shadow-xl'>Lemon Yellow</div>
              <div className='flex items-center justify-center text-gray-100 bg-rose-pink w-40 h-40 rounded-md shadow-xl'>Rose Pink</div>
              <div className='flex items-center justify-center text-gray-100 bg-blood-red w-40 h-40 rounded-md shadow-xl'>Blood Red</div>
              <div className='flex items-center justify-center text-gray-700 bg-parrot-feather w-40 h-40 rounded-md shadow-xl'>Parrot Feather</div>
              <div className='flex items-center justify-center text-gray-100 bg-purple-extended w-40 h-40 rounded-md shadow-xl'>Purple Extended</div>
          </div>
    </div>
  );
}
 
export default App;

Steps to run the application:

Step 1: Type the following command in the terminal.

npm start

Step 2: Open the web browser and type the following URL

http://localhost:3000/

Output:

Output

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:

Creating Custom Utility Classes Using ‘@layer’ directive

Creating Custom Utility Classes Using Tailwind ‘Extend’ Option

CSS

Javascript

Javascript

Creating Custom Utility Classes in Tailwind CSS and React JS

Similar Reads