🌬️ Tailwind integration for Jaspr

Tailwind is a popular css framework to quickly compose beautiful websites without needing to write a lot of css.

Jaspr has a first-class tailwind integration called jaspr_tailwind.

Setup#

Simply add jaspr_tailwind as a dev dependency to your project:

dart pub add jaspr_tailwind --dev

Next add a styles.tw.css file inside the web directory with the following content:

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, link the generated styles.css in your document, or otherwise add it to your website:

// This file is lib/main.dart

import 'package:jaspr/server.dart';

import './app.dart';

void main() {
  runApp(Document(
    title: 'My Tailwind Site',
    head: [
      // Link the styles.css file, this will be generated by the tailwind integration.
      link(href: 'styles.css', rel: 'stylesheet'),
    ],
    body: App(),
  ));
}

Usage#

If you are unfamiliar with tailwind, head over to their official documentation first (you can skip the installation part).

The jaspr_tailwind integration comes preconfigured, so you can use any tailwind classes inside your jaspr components.

A jaspr card component using tailwind would look like this:

import 'package:jaspr/jaspr.dart';

class SimpleCard extends StatelessComponent {
  const SimpleCard({required this.title, required this.message});

  final String title;
  final String message;

  @override
  Iterable<Component> build(BuildContext context) sync* {
    yield div(classes: 'p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4', [
      div(classes: 'shrink-0', [
        img(classes: 'h-12 w-12', src: '/img/logo.svg', alt: '$title Logo'),
      ]),
      div([
        div(classes: 'text-xl font-medium text-black', [text(title)]),
        p(classes: 'text-slate-500', [text(message)]),
      ])
    ]);
  }
}

Config#

By default, you don't need a tailwind config file for your project. However, if you want to customize the default config like the theme or colors, you can add a tailwind.config.js file to the root directory of your project.

When using a custom config, you should leave out the content option, as the integration takes care of that.

You can also have more than one input css file. Any file inside the web directory ending in .tw.css will be used and compiled to its .css counterpart.