Using TailwindCSS

ThyWeaver allow you to use TailwindCSS to help style your story, by using it as a PostCSS plugin

You can scaffold a new project with Tailwind pre-configured using create-weaver or install manually like this:

npm

$ npm add -D tailwindcss @tailwindcss/postcss

pnpm

$ pnpm add -D tailwindcss @tailwindcss/postcss

bun

$ bun add -D tailwindcss @tailwindcss/postcss

In your configuration file, import Tailwind and use it as a PostCSS plugin:

thyweaver.config.js

import { defineConfig } from "@thy-weaver/core";
import tailwindcss from "@tailwindcss/postcss";

const config = defineConfig({
  devServer: {
    port: 3000,
    restricToLocalhost: false,
    twineDebug: false,
  },
  bundler: {
    watcherDelay: 1000,
    postcss: {
      plugins: [tailwindcss()]
    }
    filesystem: {
      projectFiles: {
        entryPoint: "src/assets/app/index.js",
      },
    },
  },
});

export default config;

thyweaver.config.ts

import { defineConfig } from "@thy-weaver/core";
import tailwindcss from "@tailwindcss/postcss";

const config = defineConfig({
  devServer: {
    port: 3000,
    restricToLocalhost: false,
    twineDebug: false,
  },
  bundler: {
    watcherDelay: 1000,
    postcss: {
      plugins: [tailwindcss()]
    }
  },
});

export default config;

And assuming you are using the default file structure, import Tailwind in your main.css file:

src/assets/app/styles/main.css

@import 'tailwindcss'

Additional configuration

You may want to use the official Tailwind VSCode extension to provide syntax highlighting and auto-completions

To provide the completions on .twee files, you will need to configure the extension. If don't already have .vscode/settings.json in your workspace, create one

.vscode/settings.json

{
  "tailwindCSS.includeLanguages": {
    "twee3-sugarcube-2": "html",
    "twee3-chapbook-2": "html",
    "twee3-harlowe-3": "html",
    "twee3-harlowe-4": "html"
  }
}

More advanced user may want to use Prettier with Tailwind Sort, this comes pre-configured when using create-weaver

Next Steps

Check-out Tailwind documentation to learn how to use it