These docs are a work-in-progress and are currently undergoing a major rewrite!

Tailwind CSS

Tailwind is a requirement for Forge, and allows us to deliver additional templates that are easy to customize and don't require custom CSS -- the Tailwind classes in the HTML are all that's needed.

The preferred way to style your site is to use Tailwind. It's ready to go out of the box, and most of the time, all you need to do is add classes to your HTML templates.

{% extends "base.html" %}

{% block content %}
<div class="text-black bg-blue-100">
    <!-- content -->
</div>
{% endblock %}

When you use forge work, Tailwind will automatically start and compile your CSS as files are edited.

Adding custom CSS

If you need to actually write some CSS, it should be done in app/static/src/tailwind.css.

@tailwind base;


@tailwind components;

/* Add your own "components" here */
.btn {
    @apply bg-blue-500 hover:bg-blue-700 text-white;
}

@tailwind utilities;

/* Add your own "utilities" here */
.bg-pattern-stars {
    background-image: url("/static/images/stars.png");
}

Read the Tailwind docs for more about using custom styles →

Compiling for production

Your app/static/src/tailwind.css will be compiled into app/static/dist/tailwind.css when you run forge work. You should not commit the compiled CSS to your repository (/app/static/dist is in gitignore by default in the quickstart).

On Heroku, the CSS will automatically be compiled during the build process using --minify.

Installing and updating Tailwind

Because Forge requires Tailwind, we actually install it with their standalone CLI. This means that you don't actually need Node.JS or a package.json file. When you run forge work (which in turn runs forge tailwind compile --watch), it will automatically check whether Tailwind needs to be installed or updated!

The version of Tailwind that you're currently using is saved as a variable directly in your tailwind.config.js:

const FORGE_TAILWIND_VERSION = "3.0.24"

module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/forms"),
  ],
}

You can manually set the Tailwind version if you need to, or you can run forge tailwind update to update to the latest version available.