Tailwind Border Color

Tailwind border color utility enables you to apply border colors to the border of an element such as buttons, input, containers, cards etc.

<input class=" border-purple-600" type="email" placeholder="@email.com" />
<input class=" border-purple-600" type="password" placeholder="password" />
<button>Submit</button>

Preview

Tailwind border-color button

<button class=" border-purple-600....">Button</button>

Preview

Customizing Tailwind Border Colors

In addition to the predefined border color utility classes, Tailwind CSS enables you to customize border colors according to your specific design requirements. By utilizing the theme configuration file, you can define your own color palettes and assign them to border colors. This level of customization empowers you to create unique and consistent designs across your web application.

module.exports = {
  theme: {
    borderColor: (theme) => ({
      ...theme("colors"),
      DEFAULT: theme("colors.gray.300", "currentColor"),
      primary: "#1f6e56",
      secondary: "#164d3c",
      danger: "#e3342f",
    }),
  },
};

Tailwind Border Color Classes Table

Windframe Tailwind blocks

Content