Как включить Tailwind.css для сборника рассказов в библиотеке Angular рабочей области Nx?

Question

Я создал библиотеку Angular в рабочей области Nx для предоставления ui-компонентов (ui-kit). В эту библиотеку я добавил Storybook, которая работала нормально. Теперь я также хочу включить Tailwind, потому что компоненты используют его.

я использовал nx generate @nrwl/angular:setup-tailwind --project=ui-kit --buildTarget=build-storybookкоманда для настройки попутного ветра для этой библиотеки. Библиотека сборная.

У меня есть tailwind.config.js, который выглядит так:

      const { createGlobPatternsForDependencies } = require('@nrwl/angular/tailwind');
const { join } = require('path');

module.exports = {
  content: [
    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
    ...createGlobPatternsForDependencies(__dirname),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

и добавил tailwind-imports.css с содержимым

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

как импорт в preview.jsв папке .storybook библиотеки.

Но без попутного ветра.

Есть ли какой-нибудь рецепт для подражания или какой-нибудь работающий пример с nx, angular, storybook и tailwind?

Использование nx версии 13.8.3

Большое спасибо за любую помощь!

Answer 1

У меня работает версия React, надеюсь, это поможет.

Имейте в виду, что для отражения обновлений пользовательского интерфейса сборник рассказов требует жесткого обновления, так как нет горячей перезагрузки из коробки.

Мы будем использовать версию PostCSS, показанную здесь .

---

Вам понадобятся следующие файлы:

      // libs/{app-name}/tailwind.config.js

const { createGlobPatternsForDependencies } = require('@nrwl/react/tailwind');
const { join } = require('path');

module.exports = {
  content: [
    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,tsx,html}'),
    ...createGlobPatternsForDependencies(__dirname),
  ],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

      // libs/{app-name}/postcss.config.js

const { join } = require('path');

module.exports = {
  plugins: {
    tailwindcss: {
      config: join(__dirname, 'tailwind.config.js')
    },
    autoprefixer: {},
  },
};

      // libs/{app-name}/.storybook/main.js

const rootMain = require('../../../.storybook/main');

module.exports = {
  ...rootMain,

  core: { ...rootMain.core, builder: 'webpack5' },

  stories: [
    ...rootMain.stories,
    '../src/lib/**/*.stories.mdx',
    '../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
  webpackFinal: async (config, { configType }) => {
    // apply any global webpack configs that might have been specified in .storybook/main.js
    if (rootMain.webpackFinal) {
      config = await rootMain.webpackFinal(config, { configType });
    }

    // add your own webpack tweaks if needed

    return config;
  },
};

      // libs/{app-name}/.storybook/preview.js

import './tailwind-imports.css';

      // libs/{app-name}/.storybook/tailwind-imports.css

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

Answer 2

В project.json (внутри вашей библиотеки) добавьте массив «styles» в цель «build-storybook»:

      "build-storybook": {
  "executor": "@nrwl/storybook:build",
  "outputs": ["{options.outputPath}"],
  "options": {
    "uiFramework": "@storybook/angular",
    "outputPath": "dist/storybook/angular",
    "styles": ["libs/<library_name>/src/styles.scss"], // <------ HERE
    "config": {
      "configFolder": "libs/<library_name>/.storybook"
    },
    "projectBuildConfig": "angular:build-storybook"
  },
  "configurations": {
    "ci": {
      "quiet": true
    }
  }
}

И внутри styles.scss:

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

Answer 3

Вот статья, объясняющая, как это сделать: Настройте Tailwind CSS и Storybook с помощью Angular в рабочей области Nx.

Кроме того, вот образец репозитория , созданный Лео из команды Nx.

Answer 4

добавьте файл styles.css в папку .storybook в библиотеке и убедитесь, что у вас есть tailwind.config.js в этой библиотеке!

      "storybook": {
  "executor": "@nrwl/storybook:storybook",
  "options": {
    "styles": ["libs/shared/ui-components/.storybook/styles.css"],
    "uiFramework": "@storybook/angular",
    "port": 4400,
    "config": {
      "configFolder": "libs/shared/ui-components/.storybook"
    },
    "projectBuildConfig": "shared-ui-components:build-storybook"
  },
  "configurations": {
    "ci": {
      "quiet": true
    }
  }
}

в файле styles.css вы пишете:

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