Creating custom utilities with addUtilities in Tailwind - Browser Rendering Walkthrough

Render Flow - Creating custom utilities with addUtilities

[Read tailwind.config.js] -> [Parse addUtilities object] -> [Generate CSS classes] -> [Inject into stylesheet] -> [Apply classes in HTML] -> [Browser renders styles]

The Tailwind compiler reads the addUtilities config, creates new CSS classes, adds them to the stylesheet, and the browser applies these styles to elements with those classes.

Render Steps - 3 Steps

Code Added:addUtilities({ '.custom-shadow': { 'box-shadow': '4px 4px 10px rgba(0,0,0,0.3)' } })

Before

[div]
| Custom shadow box
(no shadow, plain background)

→

After

[div]
| Custom shadow box
[shadow around box]

Adding the .custom-shadow utility applies a shadow around the div, making it visually pop out.

🔧 Browser Action:Generates CSS for .custom-shadow and applies box-shadow style

Code Sample

This code creates a new utility class .custom-shadow that adds a shadow effect to the box.

Tailwind

<div class="custom-shadow p-4">
  Custom shadow box
</div>

Tailwind

module.exports = {
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.custom-shadow': {
          'box-shadow': '4px 4px 10px rgba(0,0,0,0.3)',
        },
      })
    }
  ]
}

Render Quiz - 3 Questions

After applying step 1, what visual change do you see on the div?

A The div background color changes

B The div text becomes bold

C A shadow appears around the div

D The div disappears

Common Confusions - 2 Topics

Why doesn't my custom utility class apply any visible change?

Make sure you added the class name exactly as defined in addUtilities and that Tailwind compiled your config after adding it.

💡 If no shadow or style appears, check class spelling and rebuild Tailwind CSS.

Why is the shadow clipped or not visible fully?

If the container has overflow:hidden or no space around it, shadows can be cut off visually.

💡 Ensure parent containers allow overflow or add margin to see shadows clearly.

Property Reference

Property	Value Applied	Visual Effect	Common Use
box-shadow	4px 4px 10px rgba(0,0,0,0.3)	Adds shadow around element edges	Create depth and highlight elements
padding	1rem (p-4)	Adds space inside element edges	Separate content from edges for readability

Concept Snapshot

addUtilities lets you create custom CSS classes in Tailwind. Define new styles as objects with selectors. Tailwind compiles and injects these classes. Use the new classes in your HTML to see visual changes. Common use: add shadows, borders, or custom effects.