Tailwind CSS is a good choice for a marketing website when the site is built from code components, in Next.js or React, and developers ship the pages. Used that way, it keeps styling consistent as the number of pages grows and ships only the CSS you use. It is a poor choice when non-developers need to build layouts themselves, where a visual page builder serves them better.
I use Tailwind on the Next.js and React sites I build, and Bricks, Elementor or Oxygen on WordPress client sites. The deciding question is always who builds the next page. If you haven't yet chosen between a coded site and WordPress, read Next.js or WordPress for a marketing site? first. This post assumes the platform question is settled and looks only at how to style the site.
What does Tailwind CSS actually do?
Tailwind is a utility-first CSS framework. Instead of writing a class like .hero-title and its rules in a separate stylesheet, you compose small single-purpose classes in the markup: text-4xl font-semibold tracking-tight. A build step scans your source files and generates only the classes you used.
For a marketing site, that has three practical effects:
- No stylesheet that grows forever. Old CSS for deleted sections does not linger, because unused classes are never generated.
- One set of design tokens. Colours, font sizes and spacing come from the theme variables, so a developer cannot quietly invent a new shade of blue.
- Styles live with the component. When you move or delete a section, its styling goes with it.
When is Tailwind the right choice for a marketing site?
When three things are true: the site is built in code, the team ships new pages often, and you want those pages to look like one brand.
In that setup, Tailwind keeps styling consistent without a separate theme layer that someone has to maintain. Pages are built from a shared component library, ideally typed in TypeScript, so a new landing page is a matter of composing tested sections rather than starting from a blank canvas.
Campaign and event pages show the benefit most clearly. They often need to look a little different from the rest of the site, with a bolder hero or extra motion, but they should still read as the same brand. When the tokens and core components already exist, the page inherits the brand, and only the genuinely new parts need custom work.
When is a page builder better than Tailwind?
When the people running the site need to build or rearrange layouts without a developer. That's common with hotels, restaurants, venues and service firms, where the people updating pages are rarely developers.
| Situation | Better fit | Why |
|---|---|---|
| Developers ship every page, brand consistency matters | Tailwind in Next.js or React | Shared tokens and components, small CSS |
| Marketing team builds pages from approved sections | Tailwind plus a component library | Developers build sections once, marketers compose them |
| Client edits layouts visually after launch | Bricks, Elementor or Oxygen on WordPress | Visual editing without touching code |
| One-off page needed by tomorrow on an existing WordPress site | The site's existing builder | No new tooling for a single page |
On the Cyprianis revamp, I built a new Elementor homepage, an events listing and a private dining template from a Figma design. That kind of WordPress project shows the general rule: when a client's team will edit layouts visually after launch, a builder they already know beats tidier code with a harder handover. For a fuller comparison of the builders, see Bricks vs Elementor vs Oxygen.
Related guide: Figma to Next.js: how to build a reusable component library
How do I set up Tailwind for a marketing site?
The order matters. Tokens first, then components, then pages.
- 1
Move the brand into the theme
Brand colours, font families, the type scale, spacing and radii go into the Tailwind theme before any page is built. If it is not a token, it does not ship.
- 2
Build primitives
Buttons, headings, containers, cards and form fields, each with a small, typed set of variants.
- 3
Build sections from primitives
Hero, logo strip, feature grid, testimonials, pricing, FAQ and call to action. These are what marketers think in.
- 4
Compose pages from sections
A new landing page is a list of sections with content. No new CSS for routine pages.
- 5
Check performance on mobile
Tailwind keeps CSS small, but images, fonts and scripts still decide speed. Test on a real phone before launch.
Here is what the first step looks like in Tailwind v4, where tokens are declared in CSS with the @theme directive:
@import "tailwindcss";
@theme {
--color-brand-500: #1d4ed8;
--color-brand-700: #1e3a8a;
--font-display: "Your Heading Font", sans-serif;
--font-body: "Your Body Font", sans-serif;
--text-hero: 3.5rem;
--radius-card: 1rem;
}
Each variable becomes a set of utilities: --color-brand-500 gives you bg-brand-500, text-brand-500 and border-brand-500, and --font-display gives you font-display. Fonts belong here too. Declare the heading and body families once in the theme, self-host the font files where you can, and every page and template picks them up from the same place. Changing the brand typeface later becomes a one-line edit instead of a search through dozens of files.
Does Tailwind help with page speed?
It helps a little and costs nothing. Because Tailwind generates only the classes in use, the stylesheet stays small even as the number of pages grows. That said, CSS is rarely what makes a marketing site slow. In my experience the heavy items are hero images and video, web fonts and third-party scripts such as chat widgets and trackers.
A full-screen video hero is a typical example. Treat it as progressive enhancement: show a poster image first, keep the headline and call to action readable without the video, and load the video once the page is usable. Decisions like that matter far more for speed than any CSS choice. If you have a PageSpeed Insights report, the free Page Speed Fix Planner ranks the fixes by impact, and my technical SEO and Core Web Vitals service covers the rest of the speed work.
How does Tailwind work with a CMS or headless WordPress?
Tailwind styles the components. It doesn't store content. Marketers still need somewhere to edit copy, and there are three common options:
- Markdown or MDX files in the repository. Cheapest to run, and fine when developers or technical marketers publish.
- A headless CMS. Structured fields map neatly to section components, and editors get a proper interface.
- Headless WordPress. Your team keeps the WordPress editor they know, and a Next.js or React frontend pulls content through the REST API or WPGraphQL and renders it with Tailwind components. I build this through my headless WordPress service.
Whichever you pick, model the content as sections. Each section component accepts a few fields, such as heading, body, image and button, and the CMS offers the same sections as blocks or flexible fields. Editors choose and order sections; developers control how they look. That is the middle row of the table above, and it is the setup that gives marketers the most freedom without breaking the brand.
One detail to plan for: rich text from a CMS arrives as plain HTML without Tailwind classes. The official typography plugin styles that HTML with a single prose class, which you can tune to your theme tokens.
What are the common mistakes with Tailwind on marketing sites?
Do not copy class strings between pages
The most common Tailwind mess is a long list of classes pasted into ten pages, then edited in six of them. Put the pattern in a component once, and reuse the component.
Other mistakes I see:
- Arbitrary values everywhere. A value in square brackets is fine once. Twenty of them means a token is missing from the theme.
- No component library. Without one, every new page is a fresh build, which removes most of the benefit.
- Skipping the content model. Marketers still need somewhere to edit copy, such as a CMS, markdown files or a headless WordPress backend.
- Treating Tailwind as a design system. It is the tool you build one with. The decisions about type, colour and spacing still have to be made, ideally in Figma first.
What should you check at handover?
If you're paying someone to build a Tailwind site, the handover decides whether the next developer can work on it. Ask for:
- A theme with every token named, and no hex codes scattered through components.
- A list or preview page of every section and its variants, so marketers know what they can ask for.
- Repository access in your own GitHub account, with hosting and the domain in your name.
- Pinned dependency versions and a note on the Tailwind major version. Version 4 moved configuration from JavaScript into CSS, so an upgrade is a planned task, not a quick update.
- A short guide to adding a new page from existing sections.
A well-structured Tailwind project is easy to pick up, because the utility names are the same on every project. That's a real advantage over a bespoke CSS architecture that only the original author understands.
Should your next marketing site use Tailwind?
If it is a Next.js or React site that developers maintain, yes. If your team builds pages visually in WordPress, use the builder they know. If you are unsure which camp you are in, the free Tech Stack Advisor asks who will maintain the site and what matters most, and recommends a stack with the reasons.
I build Tailwind sites with a reusable component library through my Next.js and React websites service. Send me your design or your current site through contact and I will tell you which approach fits.
