angularsasstailwind-cssstorybookangular-storybook

Use scss + tailwind in Angular Storybook


The project is an Angular 15 library which is shown in Storybook 7.6. I can't find documentation on how it works, and I especially can't get the @config "tailwind.config.js"; inclusion to work in my main.scss file.

main.scss

@config "tailwind.config.js";

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

@import 'highcharts/css/stocktools/gui.scss';

@font-face {
    ..
}

@layer base {
    ..
}

@layer components {
    ..
}

@layer utilities {
    ..
}

The funny thing is that the file is read correctly, all directives are interpreted except the first line.. In fact, anything I enter, in the first line, after the @config is completely ignored. It doesn't even generate an error!

The project is launched through the ng run storybook:storybook command, which goes to call the angular.json file, shown below.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "defaultProject": "XYZ",
  "projects": {
    "storybook": {
      "root": "",
      "sourceRoot": "storybook",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "tsConfig": ".storybook/tsconfig.json",
            "outputPath": "dist/storybook",
            "index": {
              "input": ".storybook/manager-head.html",
              "output": "dist/storybook/dist/index.html"
            },
            "main": ".storybook/main.js",
            "inlineStyleLanguage": "scss",
            "assets": [],
            "styles": [
              "storybook/assets/styles.scss"
            ],
            "scripts": []
          }
        },
        "storybook": {
          "builder": "@storybook/angular:start-storybook",
          "options": {
            "configDir": ".storybook",
            "browserTarget": "storybook:build",
            "compodoc": true,
            "compodocArgs": [
              "-e",
              "json",
              "-d",
              "."
            ],
            "port": 6006
          }
        }
      }
    },
  }
}

Solution

  • The problem was the version of Tailwind: using the @config is only supported from version 3.2 onward. Especially thanks to the "documentation" which makes no mention of this.