What you will learn
- Apply mobile-first breakpoint prefixes to change a layout across screen sizes
- Style hover, focus and disabled states with variant prefixes
- Customise colours and fonts through the Tailwind theme
Tailwind is mobile-first. A class with no prefix applies at every screen size, and a prefixed class applies from that breakpoint upwards. So grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gives one column on phones, two from the md breakpoint and three from lg. The default breakpoints are sm, md, lg, xl and 2xl, and you can hide or show elements with classes like hidden md:block.
State variants work the same way. hover:bg-blue-700 changes the background when a pointer is over the element, focus-visible:ring-2 draws a ring when someone reaches it with the keyboard, and disabled:opacity-50 fades a disabled button. You can combine them with breakpoints, as in md:hover:underline. Styling focus states clearly is important for anyone navigating without a mouse.
Every brand has its own colours and fonts, and Tailwind lets you add them to its theme. In current versions, you define these in your main CSS file as theme variables, for example a brand colour, and Tailwind then generates classes such as bg-brand and text-brand. Defining them once means the whole site stays consistent, and a later change only needs editing in one place.