Tailwind CSS

css resources

• https://evilmartians.com/chronicles/5-best-practices-for-preventing-chaos-in-tailwind-css
• https://www.youtube.com/watch?v=Ksn1tThNTjI

Docs utility class

• predefined design system https://tailwindcss.com/docs/responsive-design

https://tailwindcss.com/docs/responsive-design

• apply styles at breakpoints
  • note, sm would apply to screens 640px and wider coz it’s a ‘breakpoint’
  • put mobile layout first, then layer for sm , md, lg, etc.

https://tailwindcss.com/docs/adding-custom-styles

• If you want to change things like your color palette, spacing scale, typography scale, or breakpoints, add your customizations using the @theme directive in your CSS

note: don’t use @apply

procedure

1. define custom tokens in tailwind.config.js
   1. e.g. colors primary, font family
2. create responsive layout
   1. flex-col, etc.
3. start from smallest components
   1. button, input, etc

theme

https://tailwindcss.com/docs/theme

• use @theme to define new theme variables - creates new utility classes
• override entire default theme via --*: initial