That’s where Tailwind Trainer comes in — a brand-new interactive game designed to help you master Tailwind CSS.

What Is Tailwind Trainer?

Tailwind Trainer is a gamified learning experience that helps you transition commonly-used utility classes from the tip of your tongue to the top of your mind. Through challenging levels, you’ll sharpen your ability to recall and apply Tailwind classes effortlessly.

But it doesn’t stop there. Tailwind Trainer also introduces you to lesser-known utilities, including brand-new features from Tailwind CSS v4, so you can truly unleash the full power of the framework.

Infinite replayability

Tailwind Trainer spans endless levels across more than a dozen structured units. Each unit focuses on an essential Tailwind concept like:

• Typography
• Colors
• Spacing
• Sizing
• Flexbox & Grid
• States Like Hover & Focus
• Backgrounds
• Borders
• Tables
• Layout
• Media & Container Queries
• Filters & Effects
• Transitions & Animations
• Transforms

Using spaced repetition, the game reinforces your knowledge over time, helping you commit key utilities to memory. And because no two play-throughs are ever the same, you’ll always be challenged with fresh content, making practice feel both productive and fun.

Designed for you

Whether you’re just starting out with Tailwind CSS or you’re a seasoned developer looking to refine your skills, Tailwind Trainer is the most effective way to stay sharp.

So if you want to boost your Tailwind expertise while having fun, Tailwind Trainer is here to help.

Tailwind Trainer is now available as a free game for all Codepip users. The first 4 units can be played today, with more units being unlocked periodically.

You’ll learn all the basics of CSS anchor positioning, a cutting edge module that allows you to position and size one element relative to any other element on the page, not just its container. This powerful new feature enables tooltips, selects, dialogs, and dropdown menus to be positioned with just a few lines of CSS — something previously requiring JavaScript.

As you make your way through Anchoreum, learn about new CSS properties like position-area, position-anchor, anchor-name, position-visibility, and position-try, functions like anchor() and anchor-size(), and the anchor-center value. And get inspired to use them in your next project.

Currently only Google Chrome and Microsoft Edge are supported, but the game can be played on other browsers as they implement CSS anchor.

Play Anchoreum today and prepare the new anchor exhibit for its grand opening!

In Regex Machina, you’re an officer who must help inbound travelers reach their destinations. Your task is to process the travelers as either human or bot. To differentiate them, use regular expressions to match the human strings while avoiding the bot strings.

But be advised, some of the bots are nearly indistinguishable from humans! To process all of the travelers successfully, you’ll need to match complex text patterns using features of regular expressions such as character sets and ranges ([]), wildcards (.), quantifiers (*, +, ?), metacharacters (\d, \w, \s), anchors (^, $), and capture groups (()).

Stringo introduces the length property, and many powerful methods for manipulating strings like at, substring, slice, includes, indexOf, trim, padStart, split, replace, and match. You’ll learn to chain them together and pair them with array methods to tame even the wildest of strings.

To pull off this scheme you’ll use the JavaScript console available in the developer tools of your browser of choice. You’ll go beyond console.log() to learn new methods like console.error(), console.trace(), console.assert(), console.table(), console.time(), console.group(), and more.

Play Console Caper today, should you choose to accept the challenge.

Level up and make the trek to the Artica Region, where Professor Moss will put you to the test with a series of research quests. With a single line of code, you’ll be able to answer absolutely any question about the Querydex.

Querymon serves as an introduction to SQL (Structured Query Language), a standard language used in popular database systems such as MySQL, MariaDB, and SQLite. You’ll learn SQL topics from basic SELECT statements, filters like WHERE and IN, functions like sum() and count(), and subqueries, to more complex JOIN and UNION operations.

You’ve just been hired to work the line for global retailer Alakazam. Your task is to intercept packages bound for countries all over the world and ensure their paperwork is properly translated for their destinations. As part of your training, you’ll learn to format dollar amounts for the US, decimals for Europe, dates and times for Asia, and much more.

When your onboarding is complete, you’ll be familiar with the powerful functions of JavaScript’s built-in internationalization API, Intl, including RelativeTimeFormat, NumberFormat, DateTimeFormat, ListFormat, and DisplayNames.

With Intl, no longer do you need to do string manipulation to convert numbers to currencies. Nor do you need to do array manipulation to convert arrays to lists. Installing bulky third-party libraries to format dates and times can be a thing of the past.

Let JavaScript do the heavy lifting for you. With just a few lines of code, localize all manner of numbers and text for any region or language in the world!

Spacing elements with the gap property

To keep consistent spacing between a row of elements, like buttons or images, you could apply margin-right to each element, then reset margin-right to zero on the last element. A similar approach can be taken with a column of elements and margin-bottom.

With flexbox layout, you can accomplish this in a much more succinct and semantic way: set gap on the parent container.

Responsive media with the aspect-ratio property

Styling video embeds to be responsive while keeping their aspect ratio can be tricky. You may have found yourself copying and pasting the code below that uses a padding-top hack.

Now all you need is aspect-ratio. Life is good.

Simplifying selectors with the :is() pseudo-class

Sometimes you end up re-using the same set of styles in multiple places, resulting in repetitive selectors.

:is() pseudo-class to the rescue. You can pass it a list of selectors, and it’ll select any matches from that list. Use this to create selectors that are more readable and maintainable.

Mixing strings and values with template literals

When joining strings and values, your code can quickly become a long chain of quote marks and plus signs.

Template strings let you to inline values directly. Note the backticks instead of quotes.

Replacing multiple occurrences in a string with the replaceAll method

Searching and replacing more than one occurrence in a string used to mean dusting off the old regular expressions. Overkill for such a common task.

Now you can avoid all that regex business with the replaceAll method.

Accessing the last item of an array with the at method

Referencing the last item of an array used to be done using array length. Not the most elegant look.

Now you can count backwards from the end of an array by passing the at method a negative value.

Final Word

There’s no contest. Using these new features of CSS and JavaScript leads to less code, and more importantly, code that’s more understandable.

As with any new feature, always check for browser support before using them in the real world. Can I Use is a handy tool for that.

To stay updated on the latest new features, follow us on Twitter, Facebook, Instagram, and YouTube.

Through Pathfinder’s levels, you’ll learn how to construct relative paths, including both document relative and root relative, as well as absolute paths. You’ll get up to speed on how to use syntax like slash (/), dot (.), and double dot (..).

And by the end of the mission, you’ll know how to reference anything on your file system, from stylesheets and scripts to images, audio, and video.

You’ll learn how to compose CSS selectors, including element, class, and ID selectors; the universal selector *; combinators such as child >, adjacent sibling +, and general sibling ~; pseudo-classes such as :nth-child, :only-child, and :empty; and attribute selectors such as [attr="value"] and [attr^="value"].

CSS Scoops is aimed at people who want a comprehensive understanding of CSS selectors, setting the table for other CSS selector games such as Nth Cart and Selector Showdown.