Tailwindmarkup~30 mins

Creating custom utilities with addUtilities in Tailwind - Try It Yourself

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Creating Custom Utilities with addUtilities in Tailwind CSS

📖 Scenario: You are building a simple webpage and want to add a custom utility class to Tailwind CSS to create a special button style that is not available by default.

🎯 Goal: Create a custom utility class called .btn-custom using Tailwind's addUtilities function. This class should add a background color of #4CAF50, white text color, some padding, and rounded corners. Then use this class in your HTML button.

📋 What You'll Learn

Create a Tailwind CSS plugin that adds a custom utility class .btn-custom

The .btn-custom class must have background-color: #4CAF50;

The .btn-custom class must have color: white;

The .btn-custom class must have padding: 0.5rem 1rem;

The .btn-custom class must have border-radius: 0.375rem;

Use the .btn-custom class in an HTML button element

💡 Why This Matters

🌍 Real World

Custom utilities let you extend Tailwind CSS to fit your unique design needs without writing extra CSS files.

💼 Career

Knowing how to create custom utilities with addUtilities is useful for frontend developers to maintain consistent design systems and speed up styling.

Progress0 / 4 steps

Set up the Tailwind CSS plugin file

Create a file called tailwind.config.js and inside it, import plugin from tailwindcss/plugin. Then create an empty plugin using plugin(function() {}) and export the config object with an empty plugins array.

Tailwind

const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    // Your plugin will go here
  ],
};

// Your code here

Need a hint?

Remember to import plugin from tailwindcss/plugin and export a config object with a plugins array.

Add the custom utility with addUtilities

Inside the plugins array, add a plugin created with plugin(function({ addUtilities }) { ... }). Use addUtilities to add a new utility class .btn-custom with these CSS properties: background-color: '#4CAF50', color: 'white', padding: '0.5rem 1rem', and border-radius: '0.375rem'.

Tailwind

const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      // Add your custom utilities here
    }),
  ],
};

// Your code here

Need a hint?

Use addUtilities inside the plugin function to add the .btn-custom class with the specified CSS properties.

Create the HTML file with a button using the custom class

Create an index.html file with a basic HTML5 structure. Inside the <body>, add a <button> element with the class btn-custom and the text Click Me. Also link the Tailwind CSS stylesheet properly.

Tailwind




  
  
  Custom Button

Need a hint?

Make sure to add the btn-custom class to the button and link the compiled Tailwind CSS file.

Build Tailwind CSS and verify the custom utility works

Run your Tailwind CSS build process to generate the CSS file (e.g., npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch). Then open index.html in a browser and verify the button has a green background, white text, padding, and rounded corners from the btn-custom class.

Tailwind




  
  
  Custom Button
  


  Click Me
  



// Run Tailwind build command in terminal
// Your code here

Need a hint?

Make sure to run the Tailwind build command and open the HTML file in a browser to see the green button with white text and rounded corners.