Arbitrary Values and Custom Plugins

Sometimes you need to apply a highly specific value (such as a width of exactly 421px) that is not part of the standard design system. Tailwind handles this using Arbitrary Values and Custom Plugins.

1. What are Arbitrary Values?

Arbitrary values allow you to write custom style values directly in your HTML markup by wrapping the value inside square brackets [value].

During build compilation, Tailwind parses the bracket contents and dynamically generates a single-purpose utility class for you.

2. Practical Examples of Arbitrary Values

Here is how you can apply arbitrary values to different style properties:

Custom Dimensions

• w-[421px]: Sets the width to exactly 421px.
• h-[calc(100vh-80px)]: Sets the height dynamically using CSS calculations.

Custom Colors

• bg-[#1a73e8]: Applies a custom hex code background.
• text-[rgb(24,119,242)]: Applies a custom RGB color.

Custom Placements

• top-[13px]: Sets top coordinate offset to 13px.
• grid-cols-[200px_1fr_300px]: Configures a grid layout with customized column widths.

<div className="w-[325px] h-[120px] bg-[#f0f4f8] rounded-lg">
  Custom Dimension Element
</div>

3. Creating Basic Custom Plugins

If you want to register custom classes (such as adding utilities for text-shadows) or inject global base styling styles directly from your config, you can write a custom plugin.

Open tailwind.config.js and add your plugin to the plugins array:

// tailwind.config.js
const plugin = require("tailwindcss/plugin");

module.exports = {
  content: ["./src/**/*.{html,js,ts,jsx,tsx,astro}"],
  theme: {
    extend: {},
  },
  plugins: [
    // Register a simple custom plugin
    plugin(function({ addUtilities }) {
      const newUtilities = {
        ".text-glow": {
          textShadow: "0 0 10px rgba(59, 130, 246, 0.5)",
        },
        ".text-glow-lg": {
          textShadow: "0 0 20px rgba(59, 130, 246, 0.8)",
        }
      };
      
      // Inject utilities into the compiler
      addUtilities(newUtilities);
    })
  ]
}

Now, classes like text-glow are registered and available to use anywhere in your project just like native Tailwind utility classes.