Skip to main content

Theme

  • theme
  • base
  • component
  • utility

theme​

@import  'tailwindcss';

@theme  {
  --breakpoint-*:initial;         /* remove all default breakpoints */
  --breakpoint-tablet: 976px;     /* define my own tablet breakpoint */
  --breakpoint-desktop: 1440px;   /* define my own desktop breakpoint */
}

base​

  • applied globally throughout the project
@layer  base{
  h1:{font-size:var(--text-2xl);}
  h2:{font-size:var(--text-xl);}
}

component​

  • applied only on specific components or reusable UI elements
@layer  component{
  .card{max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden;}
}

utility​

  • define own atomic style
@utility{
  content-auto{content-visibility:auto;}
}