Tailwind is a popular CSS framework to quickly compose beautiful websites without needing to write a lot of CSS.
This package is a first-class tailwind integration for Jaspr.
This package expects tailwind to be installed through the tailwindcss command.
The recommended way is to use the
standalone tailwind cli.
To install it, download the executable for your platform, preferably the latest release on GitHub and give it executable permissions:
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-<your-platform>
chmod +x tailwindcss-<your-platform>Next move it to a common executable location or add its location to your PATH:
# e.g. /usr/local/bin on unix based systems (linux, macos)
mv tailwindcss-<your-platform> /usr/local/bin/tailwindcssTest your installation by typing in your terminal:
tailwindcss -hTo start, 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:
If you are using tailwindcss v4, then:
@import "tailwindcss";Or else, if you are using tailwindcss v3, then:
@tailwind base;
@tailwind components;
@tailwind utilities;Finally, link the generated styles.css in your document, or otherwise add it
to your website:
In static or server mode:
// 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(),
));
}Or in client mode:
<html>
<head>
<!-- Link the styles.css file, this will be generated by the tailwind integration.-->
<link href="styles.css" rel="stylesheet" />
</head>
</html>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.
If you are unfamiliar with tailwind, head over to its 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
Component build(BuildContext context) {
return 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)]),
])
]);
}
}By default, you don't need a tailwind config file for your project. The package
automatically scans the project's Dart files and builds the CSS. 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.
Note
Starting from v4, tailwind uses CSS first configuration. Prefer using that for themes and variables.
When using a custom config, you should explicitly set the content option to
scan Tailwind class names from the Dart file:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./{lib,web}/**/*.dart"],
theme: {
extend: {},
},
plugins: [],
};Note
Setting a custom content configuration is possible, but the
tailwind integration won't recompile the CSS when those files change.
Automatic recompiling is only enabled for .dart files.
To enable Tailwind CSS IntelliSense in VS Code when working with Jaspr/Dart:
-
Install the Tailwind CSS IntelliSense extension.
-
Add the following to your User Settings by opening command palette. (Ctrl+Shift+P → "Preferences: Open User Settings (JSON)"):
{
"tailwindCSS.includeLanguages": {
"dart": "html"
},
"tailwindCSS.classAttributes": [
"class",
"className",
"ngClass",
"class:list",
"classes"
],
"tailwindCSS.experimental.classRegex": ["\\W\\s*classes:\\s*'(.*)'"]
}Optionally, reload the extension.
This configuration will enable IntelliSense autocomplete and suggestions for Tailwind CSS classes in your Dart/Jaspr files.
Note
If you are using tailwindcss v3, then a config file is a must otherwise the tailwind IntelliSense plugin won't be able to pick up which version of tailwind is being used. Also highly suggested to move to v4.