Tailwind CSS
web
Source
Use Tailwind CSS utility classes in your Roq site with automatic purging and optimized builds
Install
$ roq add web:tailwind
Usage
Add Tailwind CSS support to your Roq project. Write utility-first CSS classes directly in your templates, with automatic purging of unused styles for optimized production builds.
Configuration
Tailwind configuration is automatic (detecting site content and templates) via the Quarkus Web Bundler.
Getting started
After installing, create a CSS file that imports Tailwind:
@import "tailwindcss";
@plugin "@tailwindcss/typography";
The @tailwindcss/typography plugin provides the prose class for beautifully styled content rendering (used by Roq for markdown and AsciiDoc output).
Then use Tailwind classes in your templates:
<div class="flex items-center gap-4 p-6 bg-white dark:bg-gray-800 rounded-lg shadow">
<h2 class="text-xl font-bold text-gray-900 dark:text-white">Hello Tailwind</h2>
</div>