带有 Tailwind 和 Emotion 设置的故事书
Posted
技术标签:
【中文标题】带有 Tailwind 和 Emotion 设置的故事书【英文标题】:Storybook with Tailwind and Emotion setup 【发布时间】:2020-12-07 19:22:46 【问题描述】:我有以下故事书组件:
import storiesOf from "@storybook/react"
import * as React from "react"
import styled from "@emotion/styled"
import tw from "@tailwindcssinjs/macro"
const Button = styled.button(tw`
relative
w-64 min-w-full
`)
const ButtonStyled = (children) => <Button>children</Button>
storiesOf("Button", module).add("with text", () => (
<ButtonStyled>this is a button </ButtonStyled>
))
没有styled
版本并将css 类直接嵌入到className
中它可以工作。当我引入styled
版本时,我收到以下错误:
虽然 node_module 包在那里,但似乎没有找到它。
【问题讨论】:
【参考方案1】:如果您想将 Tailwind 与 Emotion 一起使用,现在可以使用 Twin macros
。
您可以从查看以下示例开始:
https://github.com/ben-rogerson/twin.examples/tree/master/cra-emotion
安装完成后,在项目根目录中运行以下命令:
npx sb init
它将以理想的设置为您安装 Storybook。
完成此操作后,您将拥有一本即用型的情感故事书。
【讨论】:
以上是关于带有 Tailwind 和 Emotion 设置的故事书的主要内容,如果未能解决你的问题,请参考以下文章
使用 css prop 运行带有 CRA 和 Emotion 的 Quokka.js 时出现错误(运行时为经典时无法设置 importSource)
带有 Material-UI 的 s-s-r 上的 @emotion/cache 始终为空