I'm a beginner to Tailwind, so it's likely something simple. I can see an <input type="text" class="border border-solid border-2 border-indigo-600">, but only a faint 1px border of #e5e7eb shows up. I can see that this is under the *, ::before, ::after rule at the top of the stylesheet. My config file is customized only for the content paths, and theme and extend are empty. I read quite a bit of the Tailwind documentation, but I'm having a lot of trouble wrapping my head around how basics like color intersect with border, background, and text seeing as the latter three all incorporate color.

Hi all,

I am working on a form and my inputs lack borders, though they should. Borders are working with buttons, but not with inputs.

<inputname="name"id="name"value="John"type="text"className="block w-full border-2 border-solid border-gray-800 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"/>

What could the issue be?

EDIT: the border works on focus.

Design systems are getting better and more standardized these days, but honestly… I still find myself typing a lot of custom values in Tailwind — like w-[2px], h-[234px], border-[1px], that kind of thing.

It’s not a huge deal, but when it happens often, it breaks your flow. So I ended up making a tiny VSCode extension that helps me speed that part up a bit.

• w-[2px]

• h-[200px]

• mt-[10vh]

It’s not a big deal, but when you’re doing it constantly, it adds up.

So I made a tiny VSCode extension that lets you type shorthands like:

• w2p → w-[2px]

• h200p → h-[200px]

• mt10vh → mt-[10vh]

Just something I threw together to save a few keystrokes. Might be useful if you do a lot of custom utility work.

🔗 tw-auto-bracket on VSCode Marketplace

Would love to hear if anyone else has little tricks or extensions they use for Tailwind. Always looking to improve the workflow 🙌

I'm using the tab component from tailwind elements on a project i'm working on but I'm really struggling to change the bottom border color on the active tab (i.e. the tab you click to view the contents of the tab).

https://tailwind-elements.com/docs/standard/navigation/tabs/#section-related-resources

Whatever I try, the bottom border remains blue!

Does anyone have any idea where I can change it?

I'm building an embeddable React component using Vite and Tailwind CSS v4. The component works perfectly when running npm run dev, but when I embed it as a web component using Shadow DOM, some Tailwind styles (specifically background colors, border radius, and borders) are not being applied to certain components.

Setup

Vite Config:

import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react-swc"
import { defineConfig } from "vite"

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  define: {
    'process.env.NODE_ENV': JSON.stringify('production'),
    'process.env': '{}',
  },
  build: {
    lib: {
      entry: "./src/index.tsx",
      name: "myWidget",
      fileName: (format) => `mywidget.${format}.js`,
      formats: ["es", "umd"]
    },
    target: "esnext",
    rollupOptions: {
      external: [],
      output: {
        inlineDynamicImports: true,
        assetFileNames: (assetInfo) => {
          if (assetInfo.name?.endsWith('.css')) {
            return 'style.css';
          }
          return assetInfo.name || 'asset';
        },
        globals: {
          'react': 'React',
          'react-dom': 'ReactDOM'
        }
      },
    },
    cssCodeSplit: false,
  },
})

Tailwind Config:

// /** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

Web Component Implementation:

import ReactDOM from "react-dom/client";
import ChatSupport from "./components/ui/chatSupport";
import type { ChatbotCustomizationProps } from "./types/chatbotCustomizationProps";
// Import CSS as string for shadow DOM injection
import cssContent from "./index.css?inline";

export const normalizeAttribute = (attribute: string) => {
  return attribute.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
};

class MyWidget extends HTMLElement {
  private root: ReactDOM.Root | null = null;

  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    // Inject CSS into shadow DOM
    this.injectStyles();
    
    const props = this.getPropsFromAttributes<ChatbotCustomizationProps>();
    this.root = ReactDOM.createRoot(this.shadowRoot as ShadowRoot);
    this.root.render(<ChatSupport {...props} />);
  }

  disconnectedCallback() {
    if (this.root) {
      this.root.unmount();
      this.root = null;
    }
  }

  private injectStyles() {
    if (this.shadowRoot) {
      const styleElement = document.createElement('style');
      styleElement.textContent = cssContent;
      this.shadowRoot.appendChild(styleElement);
    }
  }

  private getPropsFromAttributes<T>(): T {
    const props: Record<string, string> = {};

    for (let index = 0; index < this.attributes.length; index++) {
      const attribute = this.attributes[index];
      props[normalizeAttribute(attribute.name)] = attribute.value;
    }

    return props as T;
  }
}

export default MyWidget

Problem

When the component runs in development mode (npm run dev), all Tailwind classes work correctly. However, when built and embedded as a web component with Shadow DOM, some styles are missing:

• Background colors (bg-blue-500, bg-gray-100, etc.) – only affecting specific components

• Border radius (rounded-lg, rounded-md)

• Borders (border, border-gray-300)

I know that the Tailwind styles are being injected since most of the component is how I styled it, with just some things missing. This is the first time I'm using web components so I have no idea and nowhere to look for answers.

I tried adding a safelist in the Tailwind config but that didn't seem to affect the web-component version. I then added a bunch of styles in the injectStyles function in the same file where I define the component. That worked for the rounded border styles but didn't work for the background color and border styles which weren’t being displayed.

If the rest of the styles are working, why aren't these ones doing the same? Anyone got any solutions? Is it just Shadow DOM not working the same as the regular?

<button className="text-left w-fit border-b-2 border-app-yellow-50 
md:border-none md:hover:mb-[-2px] md:hover:border-b-2 md:hover:border-app-yellow-50
">
Don't yet have an account? Sign up 😄
</button>

Hi! I have a button with a border bottom on small screens and disabling it to only enable on wideer screens. But, it isn't working. Any ideas on how I can fix this?

here is a minimum replication https://play.tailwindcss.com/ki712K5lFA

Hey there,

I'm trying to make a grid with borders between and around each element. To do this I am using divide and border class names. But I get overlap... here's a playground of what I am doing: https://play.tailwindcss.com/jVJYK17UiP. Any tips? Thanks!!!

Hello as titel says, they dont work.

Im following a guide and in the guide they work. But for example if i try to make a list with a border or add scroll margin with scroll-mt-20, Nothing happens .

Example:

<section id="rockets" class="p-6 my-12 scroll-mt-20">

-- This scroll-mt-20 does nothing.

<li class="w-2/3 sm:w-5/6 flex flex-col items-center border border-solid border-slate-900 dark:border-gray-100 bg-white py-6 px-2 rounded-3xl shadow-xl dark:bg-black"></li>

-- This does not get a border.

I know some differences between them. Border affects the layout, outline, and rings are drawn outside.

However, when you want to style an element, what is your go-to option if you don't have a layout constraint.

Hi, i was wondering if there is a way to define a default border color so i only need to apply the border class and not have to also add the border-[color].

Thanks!

Hi all, struggle town tourist here

I am trying to figure out how I can stop a div from moving when I've set a border as a hover state.With regular CSS, I usually just add a transparent border to the default state, but this is not working for me with tailwind.

It wont take both a default state border & hover state border

Heres my Tailwind Play:https://play.tailwindcss.com/gZOUB4Ynuo