How do you read the classes on a Tailwind form?

Read each class as one instruction for how the page looks. Start with the lines around the problem you can see.

A class can make the focused field easier to see. The label, error message and rules that decide whether the booking can be saved still need to come from the form and the app.

Read three instructions in a form wrapper
Class	What to look for
grid grid-cols-1	Start with one column so the fields can stack.
gap-4	Give the fields a gap from the app’s spacing scale.
md:grid-cols-2	Use two columns at the project’s medium breakpoint and above. Check that the actual labels have room.

How do you change one form without changing every screen?

Edit the class closest to the layout problem first. Use a local copy so you can see how the same fields behave at different widths.

Find the wrapper that arranges the fields
Identify the element that contains the fields. Look for the classes that control its columns and gaps.
Make the narrow layout the starting point
Keep one column until both fields have room. Check a long label and error before adding two columns at a wider breakpoint.
Check keyboard focus on the built page
Use Tab to move between the fields. If you change the focus style, give it a clearly visible replacement. Open a fresh build to make sure the styling is still there.

Why did a Tailwind style disappear after the build?

Tailwind looks for complete class names in source files it can see. A class assembled from pieces can work its way into the page without a matching CSS rule.

For example, let a form state choose between two complete class names rather than building part of a class from a variable. Check the production-style build with both states. Confirm the build reads the file containing those full names.

Read the installed major version before following setup instructions. Tailwind v4 can define shared theme values in CSS using @theme. Older JavaScript configuration files can still be used when v4 loads them explicitly. For a Vite project, Tailwind documents a dedicated plugin.

Tailwind v4’s core needs at least Chrome 111, Safari 16.4 and Firefox 128 according to its compatibility guide. Individual optional styles may need newer browser features. Keep the project source, locked package versions and build instructions so you can reproduce the CSS.

Do you need to pay to use Tailwind CSS?

The framework code is MIT licensed. Tailwind Plus is a separate product for templates and interface assets.

Tailwind Labs renamed Tailwind UI to Tailwind Plus. In September 2026 it said existing Plus customers keep their access and new customer signups are closing. Check the terms of assets you already have before sharing them. Your Tailwind project can use its own layouts and styles without those assets.