在 Storybook 6 中使用 TailwindCss 和 Angular

Question

我正在使用 Angular (11.2.8) 構建組件庫，並嘗試添加 TailwindCss 和 Storybook 6。

我發現了不同的配置，但它們都不起作用。 運行故事書時，我的組件沒有樣式。

這是我的配置：

.storybook/main.js

const path = require('path');
module.exports = {
  stories: ['../projects/storybook/**/*.stories.ts'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-knobs',
    '@storybook/addon-viewport',
    '@storybook/addon-docs',
    '@storybook/addon-a11y',
    '@storybook/addon-storysource'
  ],
  webpackFinal: async (config, { configType }) => {

    config.module.rules.push({
      test: /\,css&/,
      use: [
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: [
              require('tailwindcss'),
              require('autoprefixer')
            ]
          }
        },
      ],
      include: path.resolve(__dirname, '../'),
    });

    return config;
  }
};

.storybook/preview.js

import '../src/styles.scss';
import { setCompodocJson } from '@storybook/addon-docs/angular';
import docJson from '../documentation/documentation.json';
setCompodocJson(docJson);

src/styles.scss

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

package.json

{
  "name": "test",
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "docs:json": "compodoc -d documentation -p projects/test/tsconfig.lib.json -e json ",
    "storybook": "npm run docs:json && start-storybook -p 6006",
    "build-storybook": "npm run docs:json && build-storybook -o dist/storybook"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.2.7",
    "@angular/common": "~11.2.7",
    "@angular/compiler": "~11.2.7",
    "@angular/core": "~11.2.7",
    "@angular/forms": "~11.2.7",
    "@angular/platform-browser": "~11.2.7",
    "@angular/platform-browser-dynamic": "~11.2.7",
    "@angular/router": "~11.2.7",
    "@tailwindcss/forms": "^0.3.2",
    "@tailwindcss/typography": "^0.4.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-builders/jest": "^11.1.1",
    "@angular-devkit/build-angular": "~0.1102.7",
    "@angular/cli": "~11.2.6",
    "@angular/compiler-cli": "~11.2.7",
    "@compodoc/compodoc": "^1.1.11",
    "@storybook/addon-a11y": "^6.2.1",
    "@storybook/addon-actions": "^6.2.1",
    "@storybook/addon-docs": "^6.2.1",
    "@storybook/addon-knobs": "^6.2.1",
    "@storybook/addon-links": "^6.2.1",
    "@storybook/addon-storysource": "^6.2.1",
    "@storybook/addon-viewport": "^6.2.1",
    "@storybook/addons": "^6.2.1",
    "@storybook/angular": "^6.2.1",
    "@tailwindcss/postcss7-compat": "^2.1.0",
    "@types/jest": "^26.0.22",
    "@types/node": "^12.11.1",
    "autoprefixer": "^9.8.6",
    "codelyzer": "^6.0.0",
    "jest": "^26.6.3",
    "ng-packagr": "^11.0.0",
    "postcss": "^7.0.35",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0",
    "ts-jest": "^26.5.4",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.1.5"
  }
}

projects/test/storybook/src/stories/button.stories

import { boolean, text, select } from '@storybook/addon-knobs';
import { moduleMetadata } from '@storybook/angular';
import { CommonModule } from '@angular/common';
import {ButtonComponent, ButtonModule} from 'test';

const title = 'Button';
export default {
  title,
  component: ButtonComponent,
  decorators: [
    moduleMetadata({
      imports: [ButtonModule, CommonModule]
    })
  ]
};

const template = `
    <test-button
    [size]="size"
    [outline]="outline"
    [block]="block"
    [loading]="loading"
    [disabled]="disabled"
    (click)="clicked">
    {{content}}
    </test-button>
`;

const defaultProps = () => {
  return {
    content: text('content', 'text'),
    loading: boolean('loading', false),
    type: select('type', {
      text: 'text',
      submit: 'submit'
    }, 'text'),
    size: select('size', {
      sm: 'sm',
      lg: 'lg',
      xl: 'xl'
    }, null),
    outline: boolean('outline', null),
    block: boolean('block', null),
    disabled: boolean('disabled', null)
  };
};

export const Button = () => ({
  template,
  props: defaultProps()
});

projects/test/.../button.component.html

   <button class="px-4 border border-transparent shadow-sm text-sm font-medium rounded-md bg-red-400 text-primary py-2" [type]="type" [ngClass]="classes" [attr.disabled]="loading || disabled ? 'disabled' : null"
            (click)="clicked.emit($event)">
      <ng-content></ng-content>
    </button>`

tailwind.config.js

module.exports = {
  prefix: '',
  purge: {
  },
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        primary: '#ecc94b',
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [require('@tailwindcss/forms'),require('@tailwindcss/typography')],
};

未應用順風 styles

我不知道我的配置中缺少什么

Answer 1

您可以使用 Angular 12、Tailwind 2.1 JIT 和 Storybook 6.3 隨附的此模板。 這個 repo 也有原子文件夾結構，以防萬一你進入它。 它還擁有最新的 Ivy 渲染管道，提高了性能。

https://github.com/newwwton/angular-tailwind-storybook

Answer 2

我認為您的問題可能在於故事書需要具有css文件而不是scss ，因此您需要為您的scss文件提供合適的 webpack 加載程序。

我的preview.js文件中有這個，tailwind 為我開箱即用。

import '!style-loader!css-loader!./styles.css';

我的styles.scss包含順風進口，就像你有：

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

注意：您需要 npm 在您的項目中安裝style-loader和css-loader