Styles & Tailwind

Keep styles close#

Set styleUrl on @Component to load CSS relative to the component’s classpath package. Inline styles are also supported. PostCSS transforms component styles once at startup.

@Component(selector = "app-card",
           templateUrl = "card.component.html",
           styleUrl = "card.component.css")
public class CardComponent {}

Emulated encapsulation#

Jaspring adds scope attributes to component elements and rewrites selectors, matching Angular’s emulated style encapsulation. :host targets the component host. :host-context handles ancestor context. Selectors after ::ng-deep remain unscoped.

The layout emits processed component styles in a head style block. Put global resets, font declarations, and site-wide tokens in a static stylesheet linked from your layout.

:host { display: block; }
h2 { color: #c7fa73; }
.card { padding: 1.5rem; border: 1px solid currentColor; }

Enable Tailwind v4#

Point jaspring.tailwind.stylesheet at a classpath stylesheet. Tailwind v4 runs in GraalJS at startup, using class candidates found in compiled templates and the layout. No Node-based file scanner is needed.

# application.yaml
jaspring:
  tailwind:
    stylesheet: classpath:tailwind.css

/* src/main/resources/tailwind.css */
@import "tailwindcss";
@theme { --color-brand: #c7fa73; }

Use utilities deliberately#

Component styles can use @apply and theme variables. Jaspring compiles them with a reference to your Tailwind stylesheet before scoping them.

Keep utility class names complete and visible in templates so the candidate scanner can find them. Tailwind @plugin and @config are unavailable because no Node code executes in this pipeline.