故事书-顺风.我应该如何将顺风添加到故事书中 [英] Storybook-tailwind. How should I add tailwind to storybook

问题描述

我想为故事书添加顺风.这样 Stories 就可以像在网络上呈现一样呈现.

I want to add tailwind to storybook. So that Stories will render just like it will render on web.

我使用 create-react-app project-name --template typescript 来创建项目.

I used create-react-app project-name --template typescript to create the project.

然后安装顺风我跟着这个https://tailwindcss.com/docs/guides/create-react-app 来自 tailwind 文档的说明.

Then to install the tailwind I followed this https://tailwindcss.com/docs/guides/create-react-app instruction from the documentation of tailwind.

完成后，我运行了代码npm sb init.这确保了故事书的运行.

Once I finished it I ran the code npm sb init. Which made sure that storybook ran.

现在我需要告诉 storybook 使用 tailwindcss 进行样式设置.但我不知道如何.

Now I need to tell storybook to use tailwindcss for styling. But I have no idea how.

我看到的每个其他答案都告诉编辑 postcss.config.js 文件.

Every other answer I saw tells to edit postcss.config.js files.

但我遵循了这个https://tailwindcss.com/docs/guides/create-react-app 文档，我什至不必创建 postcss.config.js 文件.所以我很困惑现在该怎么办.

But I followed this https://tailwindcss.com/docs/guides/create-react-app documentation where I didnt even have to create postcss.config.js file. So I am confused to what to do now.

为了清楚起见，我将在下面包含一些配置文件.

For clarity I will include some configuration file below.

craco.config.js

module.exports = {
    style: {
      postcss: {
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
        ],
      },
    },
  }

.storybook/preview.js

import "../src/index.css"

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
}

.storybook/main.js

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ]
}

src/index.css

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

tailwind.config.js

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],

  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

package.json

`{
  "name": "memory",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.0.0",
    "@tailwindcss/postcss7-compat": "^2.0.2",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^16.14.2",
    "@types/react-dom": "^16.9.8",
    "autoprefixer": "^9.8.6",
    "postcss": "^7.0.35",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
    "typescript": "^4.0.3",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@storybook/addon-actions": "^6.1.11",
    "@storybook/addon-essentials": "^6.1.11",
    "@storybook/addon-links": "^6.1.11",
    "@storybook/node-logger": "^6.1.11",
    "@storybook/preset-create-react-app": "^3.1.5",
    "@storybook/react": "^6.1.11"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

推荐答案

Storybook 推荐 使用@storybook/addon-postcss 用于从现在开始自定义 postCSS 配置(而不是依赖于自定义 postcss-loader):

Storybook recommends using the @storybook/addon-postcss for customizing the postCSS config from now on (instead of relying on customizing the postcss-loader):

1. 将 postCSS 插件添加到您的安装中

1. Add the postCSS addon to your installation

npm i -D @storybook/addon-postcss     # or
yarn add -D @storybook/addon-postcss

创建postcss.config.js 在项目根目录

Create the postcss.config.js in the project root

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

将插件添加到您的 .storybook/main.js

// .storybook/main.js
module.exports = {
  ...
  addons: [
    ...
    {
      name: '@storybook/addon-postcss',
      options: {
        cssLoaderOptions: {
          // When you have splitted your css over multiple files
          // and use @import('./other-styles.css')
          importLoaders: 1,
        },
        postcssLoaderOptions: {
          // When using postCSS 8
          implementation: require('postcss'),
        },
      },
    },
  ],
};

在 .storybook/preview.js

// .storybook/preview.js
import '../src/styles.css';

这篇关于故事书-顺风.我应该如何将顺风添加到故事书中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！