the CSS file you ship should end up smaller as a result. Tailwind makes multiple color classes available:.bg-red-mediumwould give us a redbackground-colorproperty value,.text-red-mediumforcolorand so on forborder,box-shadow, or any place you can think of that you might need a color ...
@tailwindbase;@tailwindcomponents;@tailwindutilities;@layercomponents{.card{background-color:theme('colors.white');border-radius:theme('borderRadius.lg');padding:theme('spacing.6');box-shadow:theme('boxShadow.xl');}/* ... */} By defining component classes in thecomponentslayer, you can still...
If it makes sense to be customizable, Tailwind lets you customize it. This includes colors, border sizes, font weights, spacing utilities, breakpoints, shadows, and tons more. Tailwind is written inPostCSSand configured in JavaScript, which means you have the full power of a real programming la...
@layercomponents{.card{background-color:var(--color-white);border-radius:var(--rounded-lg);padding:var(--spacing-6);box-shadow:var(--shadow-xl);}} By defining component classes in thecomponentslayer, you can still use utility classes to override them when necessary: ...
## Example Donut Chart export const data = { labels: ['Red', 'Blue', 'Yellow'], datasets: [ { label: '# of Votes', data: [12, 19, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', ], borderColor: ['rgba...
I don't know how to explain... In My tailwind.config.js I have custom color colors: { base: { 50: "#some color", 100: "#some color", 200: "#some color", 300: "#some color", 400: "#some color", 500: "#some color", 600: "#some color", 700:...
.a{/* ⬇ only ignore the prop , not value ⬇ */--tab-color:hsl(var(--bc)/var(--tw-text-opacity,1));--tab-bg:hsl(var(--b1)/var(--tw-bg-opacity,1));--tab-border-color:hsl(var(--b3)/var(--tw-bg-opacity,1));} ...
@layertailwind-base,my-custom-styles;@layertailwind-base{@tailwindbase;}@tailwindutilities;@layermy-custom-styles{.radio-container{padding:4px24px;border:solid2pxrgb(230,230,230);}.radio-container:has(:focus-visible){outline:solid2pxblue;}} ...
.a{/* ⬇ only ignore the prop , not value ⬇ */--tab-color:hsl(var(--bc)/var(--tw-text-opacity,1));--tab-bg:hsl(var(--b1)/var(--tw-bg-opacity,1));--tab-border-color:hsl(var(--b3)/var(--tw-bg-opacity,1)); } ...
One of the primary usages of CSS custom properties is creating themes. In Tailwind, using custom properties is not as straightforward as using vanilla CSS due to its composition under the hood.For example, supporting border-color utilities is effortless because there exists a longhand border-color...