Last updated: 7 May 2024

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.


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.

html
<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

html
<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.

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

Tailwind Border Color Classes Table

ClassProperties
border-inheritborder-color: inherit;
border-currentborder-color: currentColor;
border-transparentborder-color: transparent;
border-blackborder-color: rgb(0 0 0);
border-whiteborder-color: rgb(255 255 255);
border-slate-50border-color: rgb(248 250 252);
border-slate-100border-color: rgb(241 245 249);
border-slate-200border-color: rgb(226 232 240);
border-slate-300border-color: rgb(203 213 225);
border-slate-400border-color: rgb(148 163 184);
border-slate-500border-color: rgb(100 116 139);
border-slate-600border-color: rgb(71 85 105);
border-slate-700border-color: rgb(51 65 85);
border-slate-800border-color: rgb(30 41 59);
border-slate-900border-color: rgb(15 23 42);
border-slate-950border-color: rgb(2 6 23);
border-gray-50border-color: rgb(249 250 251);
border-gray-100border-color: rgb(243 244 246);
border-gray-200border-color: rgb(229 231 235);
border-gray-300border-color: rgb(209 213 219);
border-gray-400border-color: rgb(156 163 175);
border-gray-500border-color: rgb(107 114 128);
border-gray-600border-color: rgb(75 85 99);
border-gray-700border-color: rgb(55 65 81);
border-gray-800border-color: rgb(31 41 55);
border-gray-900border-color: rgb(17 24 39);
border-gray-950border-color: rgb(3 7 18);
border-zinc-50border-color: rgb(250 250 250);
border-zinc-100border-color: rgb(244 244 245);
border-zinc-200border-color: rgb(228 228 231);
border-zinc-300border-color: rgb(212 212 216);
border-zinc-400border-color: rgb(161 161 170);
border-zinc-500border-color: rgb(113 113 122);
border-zinc-600border-color: rgb(82 82 91);
border-zinc-700border-color: rgb(63 63 70);
border-zinc-800border-color: rgb(39 39 42);
border-zinc-900border-color: rgb(24 24 27);
border-zinc-950border-color: rgb(9 9 11);
border-neutral-50border-color: rgb(250 250 250);
border-neutral-100border-color: rgb(245 245 245);
border-neutral-200border-color: rgb(229 229 229);
border-neutral-300border-color: rgb(212 212 212);
border-neutral-400border-color: rgb(163 163 163);
border-neutral-500border-color: rgb(115 115 115);
border-neutral-600border-color: rgb(82 82 82);
border-neutral-700border-color: rgb(64 64 64);
border-neutral-800border-color: rgb(38 38 38);
border-neutral-900border-color: rgb(23 23 23);
border-neutral-950border-color: rgb(10 10 10);
border-stone-50border-color: rgb(250 250 249);
border-stone-100border-color: rgb(245 245 244);
border-stone-200border-color: rgb(231 229 228);
border-stone-300border-color: rgb(214 211 209);
border-stone-400border-color: rgb(168 162 158);
border-stone-500border-color: rgb(120 113 108);
border-stone-600border-color: rgb(87 83 78);
border-stone-700border-color: rgb(68 64 60);
border-stone-800border-color: rgb(41 37 36);
border-stone-900border-color: rgb(28 25 23);
border-stone-950border-color: rgb(12 10 9);
border-red-50border-color: rgb(254 242 242);
border-red-100border-color: rgb(254 226 226);
border-red-200border-color: rgb(254 202 202);
border-red-300border-color: rgb(252 165 165);
border-red-400border-color: rgb(248 113 113);
border-red-500border-color: rgb(239 68 68);
border-red-600border-color: rgb(220 38 38);
border-red-700border-color: rgb(185 28 28);
border-red-800border-color: rgb(153 27 27);
border-red-900border-color: rgb(127 29 29);
border-red-950border-color: rgb(69 10 10);
border-orange-50border-color: rgb(255 247 237);
border-orange-100border-color: rgb(255 237 213);
border-orange-200border-color: rgb(254 215 170);
border-orange-300border-color: rgb(253 186 116);
border-orange-400border-color: rgb(251 146 60);
border-orange-500border-color: rgb(249 115 22);
border-orange-600border-color: rgb(234 88 12);
border-orange-700border-color: rgb(194 65 12);
border-orange-800border-color: rgb(154 52 18);
border-orange-900border-color: rgb(124 45 18);
border-orange-950border-color: rgb(67 20 7);
border-amber-50border-color: rgb(255 251 235);
border-amber-100border-color: rgb(254 243 199);
border-amber-200border-color: rgb(253 230 138);
border-amber-300border-color: rgb(252 211 77);
border-amber-400border-color: rgb(251 191 36);
border-amber-500border-color: rgb(245 158 11);
border-amber-600border-color: rgb(217 119 6);
border-amber-700border-color: rgb(180 83 9);
border-amber-800border-color: rgb(146 64 14);
border-amber-900border-color: rgb(120 53 15);
border-amber-950border-color: rgb(69 26 3);
border-x-inheritborder-left-color: inherit;
border-right-color: inherit;
border-x-currentborder-left-color: currentColor;
border-right-color: currentColor;
border-x-transparentborder-left-color: transparent;
border-right-color: transparent;
border-x-blackborder-left-color: rgb(0 0 0);
border-right-color: rgb(0 0 0);
border-x-whiteborder-left-color: rgb(255 255 255);
border-right-color: rgb(255 255 255);
border-x-slate-50border-left-color: rgb(248 250 252);
border-right-color: rgb(248 250 252);
border-x-slate-100border-left-color: rgb(241 245 249);
border-right-color: rgb(241 245 249);
border-x-slate-200border-left-color: rgb(226 232 240);
border-right-color: rgb(226 232 240);
border-x-slate-300border-left-color: rgb(203 213 225);
border-right-color: rgb(203 213 225);
border-x-slate-400border-left-color: rgb(148 163 184);
border-right-color: rgb(148 163 184);
border-x-slate-500border-left-color: rgb(100 116 139);
border-right-color: rgb(100 116 139);
border-x-slate-600border-left-color: rgb(71 85 105);
border-right-color: rgb(71 85 105);
border-x-slate-700border-left-color: rgb(51 65 85);
border-right-color: rgb(51 65 85);
border-x-slate-800border-left-color: rgb(30 41 59);
border-right-color: rgb(30 41 59);
border-x-slate-900border-left-color: rgb(15 23 42);
border-right-color: rgb(15 23 42);
border-x-slate-950border-left-color: rgb(2 6 23);
border-right-color: rgb(2 6 23);
border-x-gray-50border-left-color: rgb(249 250 251);
border-right-color: rgb(249 250 251);
border-x-gray-100border-left-color: rgb(243 244 246);
border-right-color: rgb(243 244 246);
border-x-gray-200border-left-color: rgb(229 231 235);
border-right-color: rgb(229 231 235);
border-x-gray-300border-left-color: rgb(209 213 219);
border-right-color: rgb(209 213 219);
border-x-gray-400border-left-color: rgb(156 163 175);
border-right-color: rgb(156 163 175);
border-x-gray-500border-left-color: rgb(107 114 128);
border-right-color: rgb(107 114 128);
border-x-gray-600border-left-color: rgb(75 85 99);
border-right-color: rgb(75 85 99);
border-x-gray-700border-left-color: rgb(55 65 81);
border-right-color: rgb(55 65 81);
border-x-gray-800border-left-color: rgb(31 41 55);
border-right-color: rgb(31 41 55);
border-x-gray-900border-left-color: rgb(17 24 39);
border-right-color: rgb(17 24 39);
border-x-gray-950border-left-color: rgb(3 7 18);
border-right-color: rgb(3 7 18);
border-x-zinc-50border-left-color: rgb(250 250 250);
border-right-color: rgb(250 250 250);
border-x-zinc-100border-left-color: rgb(244 244 245);
border-right-color: rgb(244 244 245);
border-x-zinc-200border-left-color: rgb(228 228 231);
border-right-color: rgb(228 228 231);
border-x-zinc-300border-left-color: rgb(212 212 216);
border-right-color: rgb(212 212 216);
border-x-zinc-400border-left-color: rgb(161 161 170);
border-right-color: rgb(161 161 170);
border-x-zinc-500border-left-color: rgb(113 113 122);
border-right-color: rgb(113 113 122);
border-x-zinc-600border-left-color: rgb(82 82 91);
border-right-color: rgb(82 82 91);
border-x-zinc-700border-left-color: rgb(63 63 70);
border-right-color: rgb(63 63 70);
border-x-zinc-800border-left-color: rgb(39 39 42);
border-right-color: rgb(39 39 42);
border-x-zinc-900border-left-color: rgb(24 24 27);
border-right-color: rgb(24 24 27);
border-x-zinc-950border-left-color: rgb(9 9 11);
border-right-color: rgb(9 9 11);
border-x-neutral-50border-left-color: rgb(250 250 250);
border-right-color: rgb(250 250 250);
border-x-neutral-100border-left-color: rgb(245 245 245);
border-right-color: rgb(245 245 245);
border-x-neutral-200border-left-color: rgb(229 229 229);
border-right-color: rgb(229 229 229);
border-x-neutral-300border-left-color: rgb(212 212 212);
border-right-color: rgb(212 212 212);
border-x-neutral-400border-left-color: rgb(163 163 163);
border-right-color: rgb(163 163 163);
border-x-neutral-500border-left-color: rgb(115 115 115);
border-right-color: rgb(115 115 115);
border-x-neutral-600border-left-color: rgb(82 82 82);
border-right-color: rgb(82 82 82);
border-x-neutral-700border-left-color: rgb(64 64 64);
border-right-color: rgb(64 64 64);
border-x-neutral-800border-left-color: rgb(38 38 38);
border-right-color: rgb(38 38 38);
border-x-neutral-900border-left-color: rgb(23 23 23);
border-right-color: rgb(23 23 23);
border-x-neutral-950border-left-color: rgb(10 10 10);
border-right-color: rgb(10 10 10);
border-x-stone-50border-left-color: rgb(250 250 249);
border-right-color: rgb(250 250 249);
border-x-stone-100border-left-color: rgb(245 245 244);
border-right-color: rgb(245 245 244);
border-x-stone-200border-left-color: rgb(231 229 228);
border-right-color: rgb(231 229 228);
border-x-stone-300border-left-color: rgb(214 211 209);
border-right-color: rgb(214 211 209);
border-x-stone-400border-left-color: rgb(168 162 158);
border-right-color: rgb(168 162 158);
border-x-stone-500border-left-color: rgb(120 113 108);
border-right-color: rgb(120 113 108);
border-x-stone-600border-left-color: rgb(87 83 78);
border-right-color: rgb(87 83 78);
border-x-stone-700border-left-color: rgb(68 64 60);
border-right-color: rgb(68 64 60);
border-x-stone-800border-left-color: rgb(41 37 36);
border-right-color: rgb(41 37 36);
border-x-stone-900border-left-color: rgb(28 25 23);
border-right-color: rgb(28 25 23);
border-x-stone-950border-left-color: rgb(12 10 9);
border-right-color: rgb(12 10 9);
border-x-red-50border-left-color: rgb(254 242 242);
border-right-color: rgb(254 242 242);
border-x-red-100border-left-color: rgb(254 226 226);
border-right-color: rgb(254 226 226);
border-x-red-200border-left-color: rgb(254 202 202);
border-right-color: rgb(254 202 202);
border-x-red-300border-left-color: rgb(252 165 165);
border-right-color: rgb(252 165 165);
border-x-red-400border-left-color: rgb(248 113 113);
border-right-color: rgb(248 113 113);
border-x-red-500border-left-color: rgb(239 68 68);
border-right-color: rgb(239 68 68);
border-x-red-600border-left-color: rgb(220 38 38);
border-right-color: rgb(220 38 38);
border-x-red-700border-left-color: rgb(185 28 28);
border-right-color: rgb(185 28 28);
border-x-red-800border-left-color: rgb(153 27 27);
border-right-color: rgb(153 27 27);
border-x-red-900border-left-color: rgb(127 29 29);
border-right-color: rgb(127 29 29);
border-x-red-950border-left-color: rgb(69 10 10);
border-right-color: rgb(69 10 10);
border-x-orange-50border-left-color: rgb(255 247 237);
border-right-color: rgb(255 247 237);
border-x-orange-100border-left-color: rgb(255 237 213);
border-right-color: rgb(255 237 213);
border-x-orange-200border-left-color: rgb(254 215 170);
border-right-color: rgb(254 215 170);
border-x-orange-300border-left-color: rgb(253 186 116);
border-right-color: rgb(253 186 116);
border-x-orange-400border-left-color: rgb(251 146 60);
border-right-color: rgb(251 146 60);
border-x-orange-500border-left-color: rgb(249 115 22);
border-right-color: rgb(249 115 22);
border-x-orange-600border-left-color: rgb(234 88 12);
border-right-color: rgb(234 88 12);
border-x-orange-700border-left-color: rgb(194 65 12);
border-right-color: rgb(194 65 12);
border-x-orange-800border-left-color: rgb(154 52 18);
border-right-color: rgb(154 52 18);
border-x-orange-900border-left-color: rgb(124 45 18);
border-right-color: rgb(124 45 18);
border-x-orange-950border-left-color: rgb(67 20 7);
border-right-color: rgb(67 20 7);
border-x-amber-50border-left-color: rgb(255 251 235);
border-right-color: rgb(255 251 235);
border-x-amber-100border-left-color: rgb(254 243 199);
border-right-color: rgb(254 243 199);
border-x-amber-200border-left-color: rgb(253 230 138);
border-right-color: rgb(253 230 138);
border-x-amber-300border-left-color: rgb(252 211 77);
border-right-color: rgb(252 211 77);
border-x-amber-400border-left-color: rgb(251 191 36);
border-right-color: rgb(251 191 36);
border-x-amber-500border-left-color: rgb(245 158 11);
border-right-color: rgb(245 158 11);
border-x-amber-600border-left-color: rgb(217 119 6);
border-right-color: rgb(217 119 6);
border-x-amber-700border-left-color: rgb(180 83 9);
border-right-color: rgb(180 83 9);
border-x-amber-800border-left-color: rgb(146 64 14);
border-right-color: rgb(146 64 14);
border-x-amber-900border-left-color: rgb(120 53 15);
border-right-color: rgb(120 53 15);
border-x-amber-950border-left-color: rgb(69 26 3);
border-right-color: rgb(69 26 3);
border-x-yellow-50border-left-color: rgb(254 252 232);
border-right-color: rgb(254 252 232);
border-x-yellow-100border-left-color: rgb(254 249 195);
border-right-color: rgb(254 249 195);
border-x-yellow-200border-left-color: rgb(254 240 138);
border-right-color: rgb(254 240 138);
border-x-yellow-300border-left-color: rgb(253 224 71);
border-right-color: rgb(253 224 71);
border-x-yellow-400border-left-color: rgb(250 204 21);
border-right-color: rgb(250 204 21);
border-x-yellow-500border-left-color: rgb(234 179 8);
border-right-color: rgb(234 179 8);
border-x-yellow-600border-left-color: rgb(202 138 4);
border-right-color: rgb(202 138 4);
border-x-yellow-700border-left-color: rgb(161 98 7);
border-right-color: rgb(161 98 7);
border-x-yellow-800border-left-color: rgb(133 77 14);
border-right-color: rgb(133 77 14);
border-x-yellow-900border-left-color: rgb(113 63 18);
border-right-color: rgb(113 63 18);
border-x-yellow-950border-left-color: rgb(66 32 6);
border-right-color: rgb(66 32 6);
border-x-lime-50border-left-color: rgb(247 254 231);
border-right-color: rgb(247 254 231);
border-x-lime-100border-left-color: rgb(236 252 203);
border-right-color: rgb(236 252 203);
border-x-lime-200border-left-color: rgb(217 249 157);
border-right-color: rgb(217 249 157);
border-x-lime-300border-left-color: rgb(190 242 100);
border-right-color: rgb(190 242 100);
border-x-lime-400border-left-color: rgb(163 230 53);
border-right-color: rgb(163 230 53);
border-x-lime-500border-left-color: rgb(132 204 22);
border-right-color: rgb(132 204 22);
border-x-lime-600border-left-color: rgb(101 163 13);
border-right-color: rgb(101 163 13);
border-x-lime-700border-left-color: rgb(77 124 15);
border-right-color: rgb(77 124 15);
border-x-lime-800border-left-color: rgb(63 98 18);
border-right-color: rgb(63 98 18);
border-x-lime-900border-left-color: rgb(54 83 20);
border-right-color: rgb(54 83 20);
border-x-lime-950border-left-color: rgb(26 46 5);
border-right-color: rgb(26 46 5);
border-x-green-50border-left-color: rgb(240 253 244);
border-right-color: rgb(240 253 244);
border-x-green-100border-left-color: rgb(220 252 231);
border-right-color: rgb(220 252 231);
border-x-green-200border-left-color: rgb(187 247 208);
border-right-color: rgb(187 247 208);
border-x-green-300border-left-color: rgb(134 239 172);
border-right-color: rgb(134 239 172);
border-x-green-400border-left-color: rgb(74 222 128);
border-right-color: rgb(74 222 128);
border-x-green-500border-left-color: rgb(34 197 94);
border-right-color: rgb(34 197 94);
border-x-green-600border-left-color: rgb(22 163 74);
border-right-color: rgb(22 163 74);
border-x-green-700border-left-color: rgb(21 128 61);
border-right-color: rgb(21 128 61);
border-x-green-800border-left-color: rgb(22 101 52);
border-right-color: rgb(22 101 52);
border-x-green-900border-left-color: rgb(20 83 45);
border-right-color: rgb(20 83 45);
border-x-green-950border-left-color: rgb(5 46 22);
border-right-color: rgb(5 46 22);
border-t-inheritborder-top-color: inherit;
border-t-currentborder-top-color: currentColor;
border-t-transparentborder-top-color: transparent;
border-t-blackborder-top-color: rgb(0 0 0);
border-t-whiteborder-top-color: rgb(255 255 255);
border-t-slate-50border-top-color: rgb(248 250 252);
border-t-slate-100border-top-color: rgb(241 245 249);
border-t-slate-200border-top-color: rgb(226 232 240);
border-t-slate-300border-top-color: rgb(203 213 225);
border-t-slate-400border-top-color: rgb(148 163 184);
border-t-slate-500border-top-color: rgb(100 116 139);
border-t-slate-600border-top-color: rgb(71 85 105);
border-t-slate-700border-top-color: rgb(51 65 85);
border-t-slate-800border-top-color: rgb(30 41 59);
border-t-slate-900border-top-color: rgb(15 23 42);
border-t-slate-950border-top-color: rgb(2 6 23);
border-t-gray-50border-top-color: rgb(249 250 251);
border-t-gray-100border-top-color: rgb(243 244 246);
border-t-gray-200border-top-color: rgb(229 231 235);
border-t-gray-300border-top-color: rgb(209 213 219);
border-t-gray-400border-top-color: rgb(156 163 175);
border-t-gray-500border-top-color: rgb(107 114 128);
border-t-gray-600border-top-color: rgb(75 85 99);
border-t-gray-700border-top-color: rgb(55 65 81);
border-t-gray-800border-top-color: rgb(31 41 55);
border-t-gray-900border-top-color: rgb(17 24 39);
border-t-gray-950border-top-color: rgb(3 7 18);
border-t-zinc-50border-top-color: rgb(250 250 250);
border-t-zinc-100border-top-color: rgb(244 244 245);
border-t-zinc-200border-top-color: rgb(228 228 231);
border-t-zinc-300border-top-color: rgb(212 212 216);
border-t-zinc-400border-top-color: rgb(161 161 170);
border-t-zinc-500border-top-color: rgb(113 113 122);
border-t-zinc-600border-top-color: rgb(82 82 91);
border-t-zinc-700border-top-color: rgb(63 63 70);
border-t-zinc-800border-top-color: rgb(39 39 42);
border-t-zinc-900border-top-color: rgb(24 24 27);
border-t-zinc-950border-top-color: rgb(9 9 11);
border-t-neutral-50border-top-color: rgb(250 250 250);
border-t-neutral-100border-top-color: rgb(245 245 245);
border-t-neutral-200border-top-color: rgb(229 229 229);
border-t-neutral-300border-top-color: rgb(212 212 212);
border-t-neutral-400border-top-color: rgb(163 163 163);
border-t-neutral-500border-top-color: rgb(115 115 115);
border-t-neutral-600border-top-color: rgb(82 82 82);
border-t-neutral-700border-top-color: rgb(64 64 64);
border-t-neutral-800border-top-color: rgb(38 38 38);
border-t-neutral-900border-top-color: rgb(23 23 23);
border-t-neutral-950border-top-color: rgb(10 10 10);
border-t-stone-50border-top-color: rgb(250 250 249);
border-t-stone-100border-top-color: rgb(245 245 244);
border-t-stone-200border-top-color: rgb(231 229 228);
border-t-stone-300border-top-color: rgb(214 211 209);
border-t-stone-400border-top-color: rgb(168 162 158);
border-t-stone-500border-top-color: rgb(120 113 108);
border-t-stone-600border-top-color: rgb(87 83 78);
border-t-stone-700border-top-color: rgb(68 64 60);
border-t-stone-800border-top-color: rgb(41 37 36);
border-t-stone-900border-top-color: rgb(28 25 23);
border-t-stone-950border-top-color: rgb(12 10 9);
border-r-inheritborder-right-color: inherit;
border-r-currentborder-right-color: currentColor;
border-r-transparentborder-right-color: transparent;
border-r-blackborder-right-color: rgb(0 0 0);
border-r-whiteborder-right-color: rgb(255 255 255);
border-r-slate-50border-right-color: rgb(248 250 252);
border-r-slate-100border-right-color: rgb(241 245 249);
border-r-slate-200border-right-color: rgb(226 232 240);
border-r-slate-300border-right-color: rgb(203 213 225);
border-r-slate-400border-right-color: rgb(148 163 184);
border-r-slate-500border-right-color: rgb(100 116 139);
border-r-slate-600border-right-color: rgb(71 85 105);
border-r-slate-700border-right-color: rgb(51 65 85);
border-r-slate-800border-right-color: rgb(30 41 59);
border-r-slate-900border-right-color: rgb(15 23 42);
border-r-slate-950border-right-color: rgb(2 6 23);
border-r-gray-50border-right-color: rgb(249 250 251);
border-r-gray-100border-right-color: rgb(243 244 246);
border-r-gray-200border-right-color: rgb(229 231 235);
border-r-gray-300border-right-color: rgb(209 213 219);
border-r-gray-400border-right-color: rgb(156 163 175);
border-r-gray-500border-right-color: rgb(107 114 128);
border-r-gray-600border-right-color: rgb(75 85 99);
border-r-gray-700border-right-color: rgb(55 65 81);
border-r-gray-800border-right-color: rgb(31 41 55);
border-r-gray-900border-right-color: rgb(17 24 39);
border-r-gray-950border-right-color: rgb(3 7 18);
border-r-zinc-50border-right-color: rgb(250 250 250);
border-r-zinc-100border-right-color: rgb(244 244 245);
border-r-zinc-200border-right-color: rgb(228 228 231);
border-r-zinc-300border-right-color: rgb(212 212 216);
border-r-zinc-400border-right-color: rgb(161 161 170);
border-r-zinc-500border-right-color: rgb(113 113 122);
border-r-zinc-600border-right-color: rgb(82 82 91);
border-r-zinc-700border-right-color: rgb(63 63 70);
border-r-zinc-800border-right-color: rgb(39 39 42);
border-r-zinc-900border-right-color: rgb(24 24 27);
border-r-zinc-950border-right-color: rgb(9 9 11);
border-r-neutral-50border-right-color: rgb(250 250 250);
border-r-neutral-100border-right-color: rgb(245 245 245);
border-r-neutral-200border-right-color: rgb(229 229 229);
border-r-neutral-300border-right-color: rgb(212 212 212);
border-r-neutral-400border-right-color: rgb(163 163 163);
border-r-neutral-500border-right-color: rgb(115 115 115);
border-r-neutral-600border-right-color: rgb(82 82 82);
border-r-neutral-700border-right-color: rgb(64 64 64);
border-r-neutral-800border-right-color: rgb(38 38 38);
border-r-neutral-900border-right-color: rgb(23 23 23);
border-r-neutral-950border-right-color: rgb(10 10 10);
border-r-stone-50border-right-color: rgb(250 250 249);
border-r-stone-100border-right-color: rgb(245 245 244);
border-r-stone-200border-right-color: rgb(231 229 228);
border-r-stone-300border-right-color: rgb(214 211 209);
border-r-stone-400border-right-color: rgb(168 162 158);
border-r-stone-500border-right-color: rgb(120 113 108);
border-r-stone-600border-right-color: rgb(87 83 78);
border-r-stone-700border-right-color: rgb(68 64 60);
border-r-stone-800border-right-color: rgb(41 37 36);
border-r-stone-900border-right-color: rgb(28 25 23);
border-r-stone-950border-right-color: rgb(12 10 9);
border-r-red-50border-right-color: rgb(254 242 242);
border-r-red-100border-right-color: rgb(254 226 226);
border-r-red-200border-right-color: rgb(254 202 202);
border-r-red-300border-right-color: rgb(252 165 165);
border-r-red-400border-right-color: rgb(248 113 113);
border-r-red-500border-right-color: rgb(239 68 68);
border-r-red-600border-right-color: rgb(220 38 38);
border-r-red-700border-right-color: rgb(185 28 28);
border-r-red-800border-right-color: rgb(153 27 27);
border-r-red-900border-right-color: rgb(127 29 29);
border-r-red-950border-right-color: rgb(69 10 10);
border-r-orange-50border-right-color: rgb(255 247 237);
border-r-orange-100border-right-color: rgb(255 237 213);
border-r-orange-200border-right-color: rgb(254 215 170);
border-r-orange-300border-right-color: rgb(253 186 116);
border-r-orange-400border-right-color: rgb(251 146 60);
border-r-orange-500border-right-color: rgb(249 115 22);
border-r-orange-600border-right-color: rgb(234 88 12);
border-r-orange-700border-right-color: rgb(194 65 12);
border-r-orange-800border-right-color: rgb(154 52 18);
border-r-orange-900border-right-color: rgb(124 45 18);
border-r-orange-950border-right-color: rgb(67 20 7);
border-r-amber-50border-right-color: rgb(255 251 235);
border-r-amber-100border-right-color: rgb(254 243 199);
border-r-amber-200border-right-color: rgb(253 230 138);
border-r-amber-300border-right-color: rgb(252 211 77);
border-r-amber-400border-right-color: rgb(251 191 36);
border-r-amber-500border-right-color: rgb(245 158 11);
border-r-amber-600border-right-color: rgb(217 119 6);
border-r-amber-700border-right-color: rgb(180 83 9);
border-r-amber-800border-right-color: rgb(146 64 14);
border-r-amber-900border-right-color: rgb(120 53 15);
border-r-amber-950border-right-color: rgb(69 26 3);
border-b-inheritborder-bottom-color: inherit;
border-b-currentborder-bottom-color: currentColor;
border-b-transparentborder-bottom-color: transparent;
border-b-blackborder-bottom-color: rgb(0 0 0);
border-b-whiteborder-bottom-color: rgb(255 255 255);
border-b-slate-50border-bottom-color: rgb(248 250 252);
border-b-slate-100border-bottom-color: rgb(241 245 249);
border-b-slate-200border-bottom-color: rgb(226 232 240);
border-b-slate-300border-bottom-color: rgb(203 213 225);
border-b-slate-400border-bottom-color: rgb(148 163 184);
border-b-slate-500border-bottom-color: rgb(100 116 139);
border-b-slate-600border-bottom-color: rgb(71 85 105);
border-b-slate-700border-bottom-color: rgb(51 65 85);
border-b-slate-800border-bottom-color: rgb(30 41 59);
border-b-slate-900border-bottom-color: rgb(15 23 42);
border-b-slate-950border-bottom-color: rgb(2 6 23);
border-b-gray-50border-bottom-color: rgb(249 250 251);
border-b-gray-100border-bottom-color: rgb(243 244 246);
border-b-gray-200border-bottom-color: rgb(229 231 235);
border-b-gray-300border-bottom-color: rgb(209 213 219);
border-b-gray-400border-bottom-color: rgb(156 163 175);
border-b-gray-500border-bottom-color: rgb(107 114 128);
border-b-gray-600border-bottom-color: rgb(75 85 99);
border-b-gray-700border-bottom-color: rgb(55 65 81);
border-b-gray-800border-bottom-color: rgb(31 41 55);
border-b-gray-900border-bottom-color: rgb(17 24 39);
border-b-gray-950border-bottom-color: rgb(3 7 18);
border-b-zinc-50border-bottom-color: rgb(250 250 250);
border-b-zinc-100border-bottom-color: rgb(244 244 245);
border-b-zinc-200border-bottom-color: rgb(228 228 231);
border-b-zinc-300border-bottom-color: rgb(212 212 216);
border-b-zinc-400border-bottom-color: rgb(161 161 170);
border-b-zinc-500border-bottom-color: rgb(113 113 122);
border-b-zinc-600border-bottom-color: rgb(82 82 91);
border-b-zinc-700border-bottom-color: rgb(63 63 70);
border-b-zinc-800border-bottom-color: rgb(39 39 42);
border-b-zinc-900border-bottom-color: rgb(24 24 27);
border-b-zinc-950border-bottom-color: rgb(9 9 11);
border-b-neutral-50border-bottom-color: rgb(250 250 250);
border-b-neutral-100border-bottom-color: rgb(245 245 245);
border-b-neutral-200border-bottom-color: rgb(229 229 229);
border-b-neutral-300border-bottom-color: rgb(212 212 212);
border-b-neutral-400border-bottom-color: rgb(163 163 163);
border-b-neutral-500border-bottom-color: rgb(115 115 115);
border-b-neutral-600border-bottom-color: rgb(82 82 82);
border-b-neutral-700border-bottom-color: rgb(64 64 64);
border-b-neutral-800border-bottom-color: rgb(38 38 38);
border-b-neutral-900border-bottom-color: rgb(23 23 23);
border-b-neutral-950border-bottom-color: rgb(10 10 10);
border-b-stone-50border-bottom-color: rgb(250 250 249);
border-b-stone-100border-bottom-color: rgb(245 245 244);
border-b-stone-200border-bottom-color: rgb(231 229 228);
border-b-stone-300border-bottom-color: rgb(214 211 209);
border-b-stone-400border-bottom-color: rgb(168 162 158);
border-b-stone-500border-bottom-color: rgb(120 113 108);
border-b-stone-600border-bottom-color: rgb(87 83 78);
border-b-stone-700border-bottom-color: rgb(68 64 60);
border-b-stone-800border-bottom-color: rgb(41 37 36);
border-b-stone-900border-bottom-color: rgb(28 25 23);
border-b-stone-950border-bottom-color: rgb(12 10 9);
border-b-red-50border-bottom-color: rgb(254 242 242);
border-b-red-100border-bottom-color: rgb(254 226 226);
border-b-red-200border-bottom-color: rgb(254 202 202);
border-b-red-300border-bottom-color: rgb(252 165 165);
border-b-red-400border-bottom-color: rgb(248 113 113);
border-b-red-500border-bottom-color: rgb(239 68 68);
border-b-red-600border-bottom-color: rgb(220 38 38);
border-b-red-700border-bottom-color: rgb(185 28 28);
border-b-red-800border-bottom-color: rgb(153 27 27);
border-b-red-900border-bottom-color: rgb(127 29 29);
border-b-red-950border-bottom-color: rgb(69 10 10);
border-b-orange-50border-bottom-color: rgb(255 247 237);
border-b-orange-100border-bottom-color: rgb(255 237 213);
border-b-orange-200border-bottom-color: rgb(254 215 170);
border-b-orange-300border-bottom-color: rgb(253 186 116);
border-b-orange-400border-bottom-color: rgb(251 146 60);
border-b-orange-500border-bottom-color: rgb(249 115 22);
border-b-orange-600border-bottom-color: rgb(234 88 12);
border-b-orange-700border-bottom-color: rgb(194 65 12);
border-b-orange-800border-bottom-color: rgb(154 52 18);
border-b-orange-900border-bottom-color: rgb(124 45 18);
border-b-orange-950border-bottom-color: rgb(67 20 7);
border-b-amber-50border-bottom-color: rgb(255 251 235);
border-b-amber-100border-bottom-color: rgb(254 243 199);
border-b-amber-200border-bottom-color: rgb(253 230 138);
border-b-amber-300border-bottom-color: rgb(252 211 77);
border-b-amber-400border-bottom-color: rgb(251 191 36);
border-b-amber-500border-bottom-color: rgb(245 158 11);
border-b-amber-600border-bottom-color: rgb(217 119 6);
border-b-amber-700border-bottom-color: rgb(180 83 9);
border-b-amber-800border-bottom-color: rgb(146 64 14);
border-b-amber-900border-bottom-color: rgb(120 53 15);
border-b-amber-950border-bottom-color: rgb(69 26 3);
border-b-yellow-50border-bottom-color: rgb(254 252 232);
border-b-yellow-100border-bottom-color: rgb(254 249 195);
border-b-yellow-200border-bottom-color: rgb(254 240 138);
border-b-yellow-300border-bottom-color: rgb(253 224 71);
border-l-inheritborder-left-color: inherit;
border-l-currentborder-left-color: currentColor;
border-l-transparentborder-left-color: transparent;
border-l-blackborder-left-color: rgb(0 0 0);
border-l-whiteborder-left-color: rgb(255 255 255);
border-l-slate-50border-left-color: rgb(248 250 252);
border-l-slate-100border-left-color: rgb(241 245 249);
border-l-slate-200border-left-color: rgb(226 232 240);
border-l-slate-300border-left-color: rgb(203 213 225);
border-l-slate-400border-left-color: rgb(148 163 184);
border-l-slate-500border-left-color: rgb(100 116 139);
border-l-slate-600border-left-color: rgb(71 85 105);
border-l-slate-700border-left-color: rgb(51 65 85);
border-l-slate-800border-left-color: rgb(30 41 59);
border-l-slate-900border-left-color: rgb(15 23 42);
border-l-slate-950border-left-color: rgb(2 6 23);
border-l-gray-50border-left-color: rgb(249 250 251);
border-l-gray-100border-left-color: rgb(243 244 246);
border-l-gray-200border-left-color: rgb(229 231 235);
border-l-gray-300border-left-color: rgb(209 213 219);
border-l-gray-400border-left-color: rgb(156 163 175);
border-l-gray-500border-left-color: rgb(107 114 128);
border-l-gray-600border-left-color: rgb(75 85 99);
border-l-gray-700border-left-color: rgb(55 65 81);
border-l-gray-800border-left-color: rgb(31 41 55);
border-l-gray-900border-left-color: rgb(17 24 39);
border-l-gray-950border-left-color: rgb(3 7 18);
border-l-zinc-50border-left-color: rgb(250 250 250);
border-l-zinc-100border-left-color: rgb(244 244 245);
border-l-zinc-200border-left-color: rgb(228 228 231);
border-l-zinc-300border-left-color: rgb(212 212 216);
border-l-zinc-400border-left-color: rgb(161 161 170);
border-l-zinc-500border-left-color: rgb(113 113 122);
border-l-zinc-600border-left-color: rgb(82 82 91);
border-l-zinc-700border-left-color: rgb(63 63 70);
border-l-zinc-800border-left-color: rgb(39 39 42);
border-l-zinc-900border-left-color: rgb(24 24 27);
border-l-zinc-950border-left-color: rgb(9 9 11);
border-l-neutral-50border-left-color: rgb(250 250 250);
border-l-neutral-100border-left-color: rgb(245 245 245);
border-l-neutral-200border-left-color: rgb(229 229 229);
border-l-neutral-300border-left-color: rgb(212 212 212);
border-l-neutral-400border-left-color: rgb(163 163 163);
border-l-neutral-500border-left-color: rgb(115 115 115);
border-l-neutral-600border-left-color: rgb(82 82 82);
border-l-neutral-700border-left-color: rgb(64 64 64);
border-l-neutral-800border-left-color: rgb(38 38 38);
border-l-neutral-900border-left-color: rgb(23 23 23);
border-l-neutral-950border-left-color: rgb(10 10 10);
border-l-stone-50border-left-color: rgb(250 250 249);
border-l-stone-100border-left-color: rgb(245 245 244);
border-l-stone-200border-left-color: rgb(231 229 228);
border-l-stone-300border-left-color: rgb(214 211 209);
border-l-stone-400border-left-color: rgb(168 162 158);
border-l-stone-500border-left-color: rgb(120 113 108);
border-l-stone-600border-left-color: rgb(87 83 78);
border-l-stone-700border-left-color: rgb(68 64 60);
border-l-stone-800border-left-color: rgb(41 37 36);
border-l-stone-900border-left-color: rgb(28 25 23);
border-l-stone-950border-left-color: rgb(12 10 9);
border-l-red-50border-left-color: rgb(254 242 242);
border-l-red-100border-left-color: rgb(254 226 226);
border-l-red-200border-left-color: rgb(254 202 202);
border-l-red-300border-left-color: rgb(252 165 165);
border-l-red-400border-left-color: rgb(248 113 113);
border-l-red-500border-left-color: rgb(239 68 68);
border-l-red-600border-left-color: rgb(220 38 38);
border-l-red-700border-left-color: rgb(185 28 28);
border-l-red-800border-left-color: rgb(153 27 27);
border-l-red-900border-left-color: rgb(127 29 29);
border-l-red-950border-left-color: rgb(69 10 10);
border-l-orange-50border-left-color: rgb(255 247 237);
border-l-orange-100border-left-color: rgb(255 237 213);
border-l-orange-200border-left-color: rgb(254 215 170);
border-l-orange-300border-left-color: rgb(253 186 116);
border-l-orange-400border-left-color: rgb(251 146 60);
border-l-orange-500border-left-color: rgb(249 115 22);
border-l-orange-600border-left-color: rgb(234 88 12);
border-l-orange-700border-left-color: rgb(194 65 12);
border-l-orange-800border-left-color: rgb(154 52 18);
border-l-orange-900border-left-color: rgb(124 45 18);
border-l-orange-950border-left-color: rgb(67 20 7);
border-l-amber-50border-left-color: rgb(255 251 235);
border-l-amber-100border-left-color: rgb(254 243 199);
border-l-amber-200border-left-color: rgb(253 230 138);
border-l-amber-300border-left-color: rgb(252 211 77);
border-l-amber-400border-left-color: rgb(251 191 36);
border-l-amber-500border-left-color: rgb(245 158 11);
border-l-amber-600border-left-color: rgb(217 119 6);
border-l-amber-700border-left-color: rgb(180 83 9);
border-l-amber-800border-left-color: rgb(146 64 14);
border-l-amber-900border-left-color: rgb(120 53 15);
border-l-amber-950border-left-color: rgb(69 26 3);

Windframe Tailwind blocks

Content

Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs

Start building stunning tailwind UIs! 

Build from scratch or select prebuilt tailwind templates