Functions and directives

Overview

Tailwind CSS provides several CSS directives (@import, @theme, @layer, @apply, @custom-variant, @utility) and functions (--spacing(), --alpha()) for customizing your styles.

Since Style is a runtime Flutter library without a CSS build step, most of these don’t have direct equivalents. Here’s how they map.

Directive reference

`@import "tailwindcss"`

Tailwind: Imports the Tailwind CSS framework.

Style equivalent: Add the package dependency:

dependencies:
  style:
    hosted: https://pub.mariuti.com
    version: ^1.0.0

import 'package:style/style.dart';

`@theme`

Tailwind: Defines custom design tokens that generate utility classes.

Style equivalent: Use the StyleTheme widget to override design tokens:

// Instead of @theme { --color-brand-500: #316ff6 }
StyleTheme(
  data: StyleThemeData(
    colors: {'brand': {500: Color(0xFF316FF6)}},
  ),
  child: Style('bg-brand-500', child: ...),
)

See Custom themes for full API reference.

`@layer`

Tailwind: Organizes custom CSS into layers (base, components, utilities).

Style equivalent: Use Flutter’s standard widget composition:

// Instead of @layer components { .card { ... } }
class Card extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Style(
      'rounded-xl bg-white p-6 shadow-lg',
      child: ...,
    );
  }
}

`@apply`

Tailwind: Applies utility classes inside custom CSS.

Style equivalent: Not needed. In Flutter, you compose Style widgets directly:

// Instead of .btn { @apply bg-blue-500 text-white py-2 px-4 rounded; }
Style('bg-blue-500 text-white py-2 px-4 rounded', child: ...)

`@custom-variant`

Tailwind: Creates custom variants like @custom-variant dark.

Style equivalent: Use the StyleVariants widget to define custom variant predicates:

// Instead of @custom-variant compact ...
StyleVariants(
  variants: {
    'compact': (context) => MediaQuery.sizeOf(context).width < 500,
  },
  child: Style('py-4 compact:py-2', child: ...),
)

Built-in variants include hover:, focus:, active:, disabled:, dark:, group-hover:, peer-hover:, and responsive breakpoints. See Custom variants for more examples.

`@utility`

Tailwind: Registers custom utility classes.

Style equivalent: Not yet supported. Use arbitrary values or compose with native Flutter properties.

Function reference

`--spacing()`

Tailwind: References the spacing scale in calculations.

Style equivalent: The spacing scale is built into the resolver. Standard spacing classes (p-4, m-8, gap-6) just work.

`--alpha()`

Tailwind: Adjusts color opacity.

Style equivalent: Use the opacity modifier syntax:

Style('bg-sky-500/50', child: ...)  // 50% opacity
Style('text-gray-900/80', child: ...)  // 80% opacity

Summary

Tailwind directive	Style equivalent
`@import "tailwindcss"`	`import 'package:style/style.dart'`
`@theme`	`StyleTheme` widget with `StyleThemeData`
`@layer components`	Flutter widget extraction
`@apply`	Direct `Style('...')` composition
`@custom-variant`	`StyleVariants` widget
`@utility`	Not yet supported
`--spacing()`	Built-in spacing scale
`--alpha()`	Opacity modifier `/50` syntax