YUNOVA · Bootstrap & Tailwind
Module 10: Advanced Tailwind
Tailwind v4 CSS-first configuration
Key points
- Tailwind v4 is configured in CSS with @import "tailwindcss".
- The @theme directive defines design tokens such as colours and fonts.
- A JavaScript config file is no longer required for most projects.
Writing Tailwind plugins
Key points
- Plugins add custom utilities, components or variants to Tailwind.
- In v4 simple custom utilities can be written with the @utility directive.
- Plugins keep repeated patterns consistent across a project.
Animations and transitions in Tailwind
Key points
- Transition utilities set which properties animate, duration and easing.
- Built-in animations include spin, ping, pulse and bounce.
- Custom keyframes can be added as theme values for new animations.
Container queries in Tailwind
Key points
- Container queries style elements by their parent's width, not the viewport.
- Mark a parent with @container, then use variants like @md: on children.
- They make components responsive wherever they are placed.