CSSwind is a free browser-based quiz game for frontend developers who want to sharpen their knowledge of CSS and Tailwind CSS utility classes.
Each round presents a series of questions in one of three modes: Tailwind to CSS (you see a Tailwind class and type the CSS property it produces), CSS to Tailwind (you see a CSS declaration and type the matching Tailwind class), or Mixed mode which alternates randomly between the two directions.
Type your answer and press Enter to submit. If the answer is correct you move on to the next question. If it is wrong you can try again as many times as you like. Press Escape to pass and skip a question — the correct answer is shown briefly before moving on.
Answer checking is forgiving. Differences in capitalisation, spaces around colons, and trailing semicolons are all ignored so you can focus on recalling the values rather than formatting.
Before each round you choose a difficulty level (easy, medium, or expert), the number of questions (10, 15, or 20), and the quiz direction (mixed, TW to CSS, or CSS to TW). Easy rounds draw mostly from common utility classes. Expert rounds include complex multi-value properties and arbitrary value syntax.
Each round is timed: 10 questions gives you 2 minutes, 15 questions gives you 3 minutes, and 20 questions gives you 5 minutes. Your score is calculated from the number of correct answers plus any time remaining on the clock.
Regular play builds fluency with Tailwind v3 utility classes and the underlying CSS declarations they map to, including layout properties like display, flexbox, and grid, spacing with margin and padding, typography, colours, borders, shadows, transitions, and more.