DEV Community: Omar Bourhaouta

Tailwind color palettes the AI way!

Omar Bourhaouta — Thu, 01 Oct 2026 00:00:00 +0000

AI agents write a lot of our CSS now, but they still guess Tailwind colors. So I gave them the same tool I use: real palettes, from any color.

In the last post I said: no need to ask the AI for a Tailwind palette, one shortcut in your editor does it. That's still true. But more and more, it's not me typing the CSS. It's the agent.

So I tried it. I asked an agent: "Add a brand color #db4d53 to my theme". It added one line:

--color-brand: #db4d53;

One color, no shades. So bg-brand-500 and hover:bg-brand-600 don't exist. And when agents do write the shades, they guess them.

So Tailwind Shades is now more than a VS Code extension. The same engine is also an MCP server for AI agents, a CLI, and a website.

Give it to your agent

MCP is how AI agents like Claude Code, Cursor and VS Code use outside tools. The server runs online, so there's nothing to install. In Claude Code:

claude mcp add --transport http --scope user tailwindshades https://tailwindshades.bourhaouta.com/mcp

Or in Cursor's ~/.cursor/mcp.json:

{
  "mcpServers": {
    "tailwindshades": { "url": "https://tailwindshades.bourhaouta.com/mcp" }
  }
}

Now ask the same thing again, and you get the full palette in your project's Tailwind format, with #db4d53 exactly at brand-500:

@theme {
  --color-brand-50: oklch(97.1% 0.01 13.669);
  --color-brand-100: oklch(93.2% 0.024 14.006);
  /* ... */
  --color-brand-500: oklch(61.6% 0.177 21.62);
  /* ... */
  --color-brand-950: oklch(25.8% 0.069 22.331);
}

The agent gets two tools:

generate_palette: the full palette from one color, for Tailwind v4, v3, v2 or v1.
closest_tailwind_color: the closest Tailwind class to a color, and if the difference is visible. For #db4d53 it says red-500, but the difference is visible, so a custom palette is better.

It also warns the agent when a name would replace a Tailwind color. Without a name, the palette would be called red, and every red-* class in your app would change.

Prefer it local? Run npx -y tailwindshades-mcp instead. Then nothing leaves your machine.

No editor? No agent?

There's a website now: tailwindshades.bourhaouta.com. Pick a color, see the palette next to the Tailwind color it follows, and copy the code. You can also share a palette with a link.

And in the terminal:

npx tailwindshades-cli "#db4d53" --name brand

A better fit

If you read the last post, #db4d53 landed at 400. Now it's 500.

The engine used to pick the shade by chroma, how colorful your color is. Now it picks the shade with the closest lightness, so the whole palette follows Tailwind's light-to-dark steps more closely. Building the MCP server is how I found it: the closest Tailwind shade to #db4d53 is red-500, but the palette put it at 400.

Get it

Website, with the setup for each agent
VS Code Marketplace and Open VSX
npm: tailwindshades-mcp and tailwindshades-cli
Source on GitHub

If your agent picks better colors now, a star on GitHub or a rating on the Marketplace helps other people find it.

Tailwind color palettes the fast way!

Omar Bourhaouta — Wed, 30 Sep 2026 00:00:00 +0000

You have one brand color and you need the full Tailwind palette, from 50 to 950. No need to ask the AI for it, one shortcut in your editor does it.

When I start a new project, the first thing I do is set up the theme colors. Lately it's tempting to just ask the AI: "give me a Tailwind palette from #db4d53". Then you wait for it to think, you spend tokens, and you get shades that are guessed. Sometimes your own color isn't even in there.

So I made Tailwind CSS Shades, a small VS Code extension that does it instantly. No AI, no tokens, no waiting.

How to use it

Put the cursor on a color: #db4d53, rgb(…), hsl(…), oklch(…) or a color name.
Press Ctrl+K Ctrl+G (Cmd+K Cmd+G on macOS).
Name it, like brand.

And you get your theme:

@theme {
  --color-brand-50: oklch(97.1% 0.012 16.784);
  --color-brand-100: oklch(91.4% 0.03 17.121);
  /* ... */
  --color-brand-900: oklch(38.1% 0.131 25.127);
  --color-brand-950: oklch(25.8% 0.085 25.446);
}

It reads your Tailwind version from the project, so on v3 you get a tailwind.config.js object with hex colors instead. It works with v4, v3, v2 and v1.

The shades look like Tailwind's

It doesn't just mix your color with white and black. It finds the closest Tailwind color to yours and copies how that color changes from light to dark, in OKLCH. And your color stays exactly as it is, at the shade where it fits best.

Get it

VS Code Marketplace
Open VSX for Cursor, Windsurf and VSCodium
Source on GitHub

If it saves you some time, a rating on the Marketplace or Open VSX helps other people find it.

Tailwind `.container` the right way!

Omar Bourhaouta — Sun, 12 Jul 2020 23:28:18 +0000

This article has been originally posted on my blog.

The container is just a div you can style with CSS. You can give it a fixed width, paddings on the inline edges and center it with margins. and it comes by with Tailwind's default configuration.

The container is just a normal div you can style with CSS. You can give it a fixed width, horizontal padding and center it with margin to allow for more sophisticated CSS styling.

And it comes by with Tailwind's default configuration as a component for fixing an element's width to the current breakpoint:

// tailwind.config.js
module.exports = {
  theme: {
    container: {},
  },
};

But it comes with no more than the fixed width, which makes the containers neither centered nor having horizontal padding as we used to know with previous CSS frameworks. But since Tailwind is a utility-first CSS framework we have to do something like this:

<div class="container px-4 mx-auto">
  <!-- ... -->
</div>

By using the previous example, you just had your container fixed in the center with some padding on each side. But what if you needed to change the px-4 to px-6 on your entire project, you will have to find every single container on your project and change manually.

Customizing

The ideal way to avoid this issue is by customizing the built-in options of the container component:

// tailwind.config.js
module.exports = {
  theme: {
    container: (theme) => ({
      // To center containers by default
      center: true,

      // To add horizontal padding by default
      padding: theme("spacing.4"),
    }),
  },
};

To specify a different padding amount for each breakpoint, use an object to provide a default value and any breakpoint-specific overrides:

// tailwind.config.js
module.exports = {
  theme: {
    container: (theme) => ({
      padding: {
        DEFAULT: theme("spacing.4"),
        sm: theme("spacing.5"),
        lg: theme("spacing.6"),
        xl: theme("spacing.8"),
      },
    }),
  },
};

You either use theme or pass specific values:

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      padding: {
        DEFAULT: "1rem",
        sm: "2rem",
        lg: "4rem",
        xl: "5rem",
      },
    },
  },
};

Using `addComponents`

For more flexibility with the container, you can just disable it by setting the .container property to false in the corePlugins section of your config file:

// tailwind.config.js
module.exports = {
  corePlugins: {
    // ...
    container: false,
  },
};

And then create your custom component from scratch with the needed CSS, using theme function to get the theme values:

// tailwind.config.js
module.exports = {
  plugins: [
    ({ addComponents, theme }) => {
      addComponents({
        ".container": {
          marginInline: "auto",
          paddingInline: theme("spacing.4"),
          maxWidth: theme("screens.sm"),

          // Breakpoints
          "@screen sm": {
            maxWidth: theme("screens.sm"),
          },
          "@screen md": {
            maxWidth: theme("screens.md"),
          },
        },
      });
    },
  ],
};

One more benefit you get out of this approach is setting a custom container max-width, as you can see in my personal website the container is always small.

Using `@apply`

You can also use @apply inside your components and this is how you can do it:

// tailwind.config.js
module.exports = {
  plugins: [
    ({ addComponents, theme }) => {
      addComponents({
        ".container": {
          "@apply px-4 mx-auto": {},
          maxWidth: theme("screens.sm"),
        },
      });
    },
  ],
};

I made a Dribbble shots generator

Omar Bourhaouta — Tue, 26 May 2020 15:40:15 +0000

Shooot lets you upload your website screenshot to adjust it for a Dribbble shot with background color variants and other features: https://shooot.bourhaouta.com/

Your feedback is needed to get to 1.0.0 version.
Feel free to check the repo

DEV Community: Omar Bourhaouta

Tailwind color palettes the AI way!

Give it to your agent

No editor? No agent?

A better fit

Get it

Tailwind color palettes the fast way!

How to use it

The shades look like Tailwind's

Get it

Tailwind `.container` the right way!

Customizing

Using addComponents

Using @apply

I made a Dribbble shots generator

Using `addComponents`

Using `@apply`