My Tailwind classes do nothing

Check the Tailwind line

JSpark builds Tailwind only for a stylesheet that asks for it. The CSS Part must have this line, not inside a comment:

@import "tailwindcss";

Every Starter with a CSS Part starts with it. If you deleted the line, add it back as the first line. In a Vue or Svelte Snippet, put it in the component’s <style>.

If a class still does nothing, read the console. A Tailwind error stops the page from running and names the line of the CSS Part, for example Style line 4: Cannot apply unknown utility class `bg-nope-500`.

Write class names whole

JSpark finds class names by reading your Snippet as it is written. A class name put together while the code runs, such as `bg-${color}-500`, is never seen, so Tailwind makes no CSS for it. This is Tailwind’s own rule too.

Write every class name in full, and pick between them in code:

Tailwind v3 setups

JSpark uses Tailwind 4, built into the app. Tailwind 3 setups do not work:

• @tailwind base;, @tailwind components; and @tailwind utilities; alone do not turn Tailwind on. Replace them with @import "tailwindcss";.
• There is no tailwind.config.js. Set colours and other values in the stylesheet with @theme, as Tailwind 4 does.
• @plugin and @config are refused with an error: Tailwind plugins and configs aren’t supported here.
• @import of a file beside the page is refused, because there is no such file. An @import of a web address is left for the browser.

A page styled with Tailwind is styled only in JSpark: opened in a browser on its own, its@import "tailwindcss" finds nothing. See Tailwind CSS.