Tailwind in the browser

You do not need to install anything to try Tailwind: one <script> tag with its browser build is enough. The script finds the classes on the page and generates CSS for them on the spot.

Adding the script

Create an index.html file, put the script line into <head> and use classes in the markup:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<h1 class="text-3xl font-bold text-indigo-600">Shop</h1>
<p class="text-gray-600">Headphones, speakers and chargers.</p>

Open the file in a browser — the heading becomes large, bold and blue. The script watches the page: when JavaScript adds a new element with classes, styles for it appear automatically.

Every example in this course starts with this script. Thanks to it the code under each example turns into a working page, and you can change the classes and see the result right away.

For learning only

The browser build is handy for experiments and quick prototypes, but not for websites:

the script weighs hundreds of kilobytes and builds the CSS again for every visitor;
until it loads, the page shows without styles;
you cannot add plugins from npm.

Real projects build the CSS in advance — with Vite or the command-line tool. Those are the next two lessons, and the classes there are exactly the same.

Your own settings

Tailwind CSS for the browser goes into a <style type="text/tailwindcss"> tag. Special directives work inside it, for example @theme, which adds your own colors:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<style type="text/tailwindcss">
  @theme {
    --color-brand: #e11d48;
  }
</style>
 
<p class="text-brand font-bold">20% off</p>

A text-brand class appeared, and the text turned crimson. @theme is covered in detail in the customization chapter.

Preflight

Along with the utilities Tailwind adds Preflight — a base reset of browser styles. It removes margins from headings and paragraphs and bullets from lists, makes images block-level and evens out font sizes:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<h1>Heading</h1>
<ul>
  <li>Headphones</li>
  <li>Speaker</li>
</ul>

The heading looks like plain text, and the list has no bullets. This is on purpose: every element looks exactly the way your classes say, with no hidden browser styles.

Common mistake

Expecting an <h2> to be large by itself and thinking the layout is "broken". After Preflight, size, weight and spacing come from classes:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<h2 class="mb-2 text-2xl font-semibold">New arrivals</h2>
<ul class="list-disc pl-5">
  <li>Headphones</li>
  <li>Speaker</li>
</ul>

Now the heading is large, and the list has bullets again — the list-disc class brought them back.

Thanks for reading!