Custom TailwindCss V4 2025.

-- dark mode toggle in tailwind,
-- accent : use to change browser default styling for radio/check-box.

<label> <input type='checkbox' class='accent-pink-500' checked /> </label>

-- fluid-text: create responsive text

text-[min(10vw, 70px)] 

-- file: change default styling of input type='file'

-- highlight : when user select text on screen selection:bg-green-400 when select.
-- accordin open:bg-white caret-pink-400

-- tailwind attributes text-[#fff] max-[400px]:bg-green-300
-- tailwind directives
--- @theme, @apply, @layer base, @layer component,

1. @theme define your custom styling and variables here...!

@theme {
 --color-primary: #78F29;
 --font-mono: ui-monospace, monospace;
 --breakpoint-xs: 540px;
 --container-xs: 900px;
}

2. @layer base applies Styles globally across the project.

@layer base {
 h1 {
  @apply text-primary  bg-red-300
  font-family: robot;
  color: green;
 }

p {
  @apply text-primary font-mono bg-green-300
 }

}

3. @layer components applies Styles to specific Components.

@layer components {
 .card {
    background-color: blue;
    border-radius: 50px;
    border: 2px solid black;
   }
}

4. utility applies Atomic Styles to individual properties, like margin, padding, typography, colors, and more.

@layer utility{
 .card {
    @apply mx-10 my-10 rounded-lg text-white ;
    background-color: blue;
    border: 2px solid black;
   }
}

you can also create custom styles Utility.

@utility flex-center{
  @apply flex justify-center items-center
}

5. "@apply" insert tailwindCSS into CSS.

.search-btn{
   @apply rounded border-b-2 broder-green-300 shadow-md;
}