tailwind

Tailwind CSS for the web/document pages on Optersoft Academy, in a single line.

<script src="https://tailwind.optersoft.com/tailwind.js"></script>

No build step, no config file: drop that tag in a page and write utility classes. It is Tailwind's browser compiler with the two first-party plugins compiled in — typography (.prose) and forms. The browser build normally refuses to load plugins, so they are bundled into the script instead, the way the old v3 Play CDN did it. They are the real, unmodified plugins — nothing here is hand-written CSS.

Typography

Wrap document content in class="prose":

<article class="prose">
  <h1>Títol</h1>
  <p>Text amb <a href="#">un enllaç</a>.</p>
</article>

Size (prose-lg), colour (prose-slate), dark (prose-invert) and element modifiers (prose-headings:text-blue-600) all work, as does not-prose to opt a subtree out. This page is itself a .prose.

Forms

Preflight strips form controls down to nothing — no border, no padding. The forms plugin gives them a visible default again, with no classes needed:

<input type="text">

select checkbox

Customising

Preflight is on, so content outside .prose starts from Tailwind's reset. To extend the theme, add a <style type="text/tailwindcss"> — it is merged with the default:

<style type="text/tailwindcss">
  @theme { --color-brand: #e11d48; }
</style>

If that style contains its own @import, it takes over the build completely — including @plugin "@tailwindcss/typography", which works here.

tailwindcss 4.3.3 · typography 0.5.20 · forms 0.5.11 · built from gitlab.com/optersoft/web/document-tailwind