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
}
}
}
},
}
}
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.