Tailwind is CSS: a utility-first framework that generates classes from your tokens. Plain CSS (or CSS modules) keeps selectors in stylesheets. Choose Tailwind for speed and constraint; choose CSS when you have highly unique layouts, a design system of components, or a team that already reasons in selectors.
This CSS cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.
Quick reference
- Utility:
flex items-center gap-4maps to Flexbox properties. You still need to know Flexbox to debug. - Tokens: Tailwind’s theme (spacing, colors) is the design system. Changing a token updates utilities.
- Plain CSS: Best when a component has many states, animations, or when class lists become unreadable.
- @apply: Pull utilities into a class. Overuse recreates a CSS file with extra indirection.
- Specificity: Utilities are single-class. Arbitrary variants and
!increase conflict risk. - Bundle: Purge/content config must see your PHP/JSX templates or unused CSS stays huge — or needed classes vanish.
- Mix: Use Tailwind for layout/spacing; write CSS for complex keyframes and third-party overrides.
- A11y: Neither tool adds labels or focus styles for you.
outline-noneis still dangerous.
Copy-paste examples
Same card in Tailwind-like utilities vs CSS
The CSS version is what utilities compile toward. If you cannot read this, Tailwind will not save the layout.
.card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
border-radius: 0.75rem;
background: #fff;
}
@media (min-width: 48rem) {
.card { padding: 1.5rem; }
}Component class instead of a 20-class string
Extract when the same cluster repeats. That is valid in Tailwind (@apply) or in a stylesheet.
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 999px;
}Common mistakes
- Treating Tailwind as a replacement for learning CSS — then freezing on any layout bug.
- Disabling preflight/reset and wondering why heading margins look like 1999.
- Building a whole design system in
@applycopies of the same utilities. - Purging classes that you build as strings in PHP (
"mt-" . $n) so spacing never appears.
FAQ
- Is Tailwind “better” than CSS? It is a workflow. Teams ship faster when the constraint is welcome. Unique marketing pages often still want custom CSS.
- Can I use Tailwind with React Native? Not the web package. NativeWind and similar tools exist; they are not the same as
class="flex"on the web.
- Do I need both? Yes, often: Tailwind plus a small CSS file for keyframes, third-party widgets, and print.
Related CSS cheat sheets
Build with this stack
When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.
Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.