EN

Course

Tailwind CSS

Learn the idea of utility classes: styling decided by the classes you list in your HTML. Every step is compared side by side with plain CSS, so what you learned about CSS carries straight over. We also make clear when it pays off and when it costs you.

Start learning

What is Tailwind CSS?

Tailwind CSS · Lesson 1 / 7

Getting it running first2 lessons

  1. 01What is Tailwind CSS?p-*bg-*rounded-*font-bold
  2. 02Installing it in your own projectnpm install tailwindcss @tailwindcss/cli@import "tailwindcss";--watch@theme

Learning how to write it2 lessons

  1. 03How to read the class namesp-*px-*text-*w-fullp-[13px]
  2. 04Building Flexbox and Grid with classesflexjustify-betweenitems-centergrid-cols-*gap-*

Reacting to state and screen width2 lessons

  1. 05Switching by screen width (md: and lg:)md:lg:hidden
  2. 06Reacting to state (hover: and focus:)hover:focus-visible:dark:grouptransition

Deciding where it fits1 lesson

  1. 07When it pays off, and when it costs you@apply