Tailwind CSS

Tailwind works in every Web Snippet, in JSpark and JSpark+, with nothing to install. JSpark builds the page’s stylesheet with its own copy of Tailwind v4 before the page loads. So it works offline, and the page never shows unstyled first.

Turn Tailwind on

Put this line in the CSS Part:

@import "tailwindcss";

Then use Tailwind’s classes in the HTML Part, or in className in JSX. Plain CSS still works beside them, and so do @apply and @theme.

Every Starter with a CSS Part starts with the line, and its demo page is styled with Tailwind. To turn Tailwind off, delete the line. A line inside a comment counts as off.

In a Vue or Svelte component

A Vue or Svelte Snippet has no CSS Part. Put @import "tailwindcss"; in the component’s <style> instead. The component’s own rules keep their scoping, and @apply works in them. The Vue and Svelte Starters open with the line on.

Write class names whole

JSpark finds the classes to build by reading your code as you wrote it. A class name put together while the code runs is not found, so it gets no style:

`bg-${color}-500`

Write each class name whole instead, for example color === "red" ? "bg-red-500" : "bg-green-500". Tailwind has the same rule in every project.

What is not supported

• Tailwind v3 setups: a tailwind.config.js file, or @tailwind base;.
• @plugin and @config, so no JavaScript plugins, Tailwind’s own included. The console says the file can’t be loaded: Tailwind plugins and configs aren’t supported here.
• An @import of a file beside the page, such as @import "./theme.css";. There is no file to read. The console says Only Tailwind stylesheets can be imported here.
• A copy of the page opened outside JSpark is not styled: there, @import "tailwindcss"; finds nothing.

An @import of a web address, such as a font’s stylesheet, still works: the browser loads it.

Fix a Tailwind error

A Tailwind error stops the Run, as a syntax error in the script does. The page doesn’t load, the footer says Didn’t run, and the console names the line of the CSS Part:

Click the line in the console to open the CSS Part at that line. Fix it, and run again.

When your classes do nothing, see My Tailwind classes do nothing.

Class name suggestions JSpark+

In JSpark+, the editor suggests Tailwind classes as you type inside class="…" or className="…", in the HTML Part and in JSX. Beside each suggestion is the CSS that class makes. The list comes from the Snippet’s own stylesheet, so a colour you add with @theme is offered too. JSpark suggests no classes; Tailwind styles work the same.

Which Tailwind

It is not a package: it changes only when JSpark updates.