---
title: Jaspr Tailwind
description: A tailwind integration for jaspr.
previous: /eco/flutter_embedding
next: /eco/packages
---

# 🌬️ Tailwind integration for Jaspr

[Tailwind](https://tailwindcss.com/) 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:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

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

```dart
// This file is lib/main.dart

import 'package:jaspr/html.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](https://tailwindcss.com/docs/utility-first)
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:

```dart
import 'package:jaspr/html.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'.split(' '), [
      div(classes: ['shrink-0'], [
        img(classes: 'h-12 w-12'.split(' '), src: '/img/logo.svg', alt: '$title Logo'),
      ]),
      div([
        div(classes: 'text-xl font-medium text-black'.split(' '), [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.