Creating Custom Utility Classes Using Tailwind ‘Extend’ Option
- 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:
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