초급 코드 지구

Tailwind CSS

유틸리티 클래스로 빠르게 스타일링하세요.

Tailwind CSS lets you style a page without leaving your HTML. Small classes such as p-4, flex and text-lg each do one job, and together they build any design. The same markup can lay out left-to-right English and right-to-left Persian.

This track starts from basic HTML and CSS. You will set Tailwind up, learn its scales for spacing, colour and type, build layouts with flex and grid, make them responsive and interactive, lay them out right to left with logical utilities, and add your own design tokens. Then you go one level up with container queries, motion and state variants, and finish by building a bilingual dashboard. Every class you meet is a real Tailwind CSS 4 class, and you will see the CSS behind it.

레슨: 14
시간: 2시간
난이도: 초급

코스 시작하기 · Why Tailwind?

이 코스의 레슨은 당분간 영어로 제공돼요.

브론즈 도전 가능
실버 도전 가능
골드 잠김

실력을 증명할 준비됐나요?

브론즈, 실버, 골드 세 가지 시험이 기다리고 있어요.

시험 보러 가기

이 코스를 마치면 할 수 있는 것

Set up Tailwind CSS 4 in a project with one CSS import
Style any element with spacing, colour, type, border and shadow utilities
Build layouts with flex and grid utilities
Make interfaces responsive and interactive with md:, hover:, focus-visible: and dark:
Lay out Persian and English from the same markup with logical utilities
Add your own design tokens with @theme and keep markup tidy with components

여정

1
챕터 1
Utility first

The utility-first idea, the setup, the scales for spacing, colour and type, and layout with flex and grid.

0 / 5
2
챕터 2
Real interfaces

Responsive layouts, hover and focus states, dark mode, right to left with logical utilities, and your own tokens.

0 / 5
3
챕터 3
Next level

Container queries, motion, styling from data and ARIA state, and a bilingual dashboard project.

0 / 4