storybook을 통해tailwindUI 스타일로 템플릿 관리

개시하다

팀 개발 과정에서 프로젝트를 뛰어넘어 템플릿을 사용하는 페이지 요소가 등장했지만 실장자에 따라 출력의 품질도 편차가 발생할 수 있다.
Tailwind에서 디자인 영패의 관리를 하고token 등급의 제약을 가하더라도 모레컬스, organisms를 조합하면 진동이 커진다.
따라서 외관과 코드를 가로로 배열하고 템플릿 관리를 통해 줄일 수 있을까

tailwindUI

Tailwind 개발팀에서 개발한 유료 템플릿 모음입니다.
https://tailwindui.com/components
아래와 같이 Preview와 Code를 전환하여 CSS에서 어느 것이 정확한지 확인하고 외관상 필요한 것을 선택하여 코드를 복사할 수 있습니다.

Storybook

그러나 관리를 위해tailwindUI와 같은 트렌디한 웹 페이지를 만드는 비용도 높고 비현실적이다.그래서 storybook에 plugin을 넣어서 그 스타일로 만들어보세요.

1.storybook 설정

npx sb init
yarn add -D @storybook/addon-storysource

가져오기@storybook/addon-storysource로 원본 코드를 시각화합니다.
.storybook/main.js

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

tailwind를 반영하는 것처럼 스타일즈/globls.import css.
./storybook/preview.js

   import "../styles/globals.css"

2. tailwind의 설정

yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

tailwind.config.js 생성

npx tailwindcss init --full

css 설정
./styles/globals.css

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

결실

소스 코드는 여기.

끝맺다

공통된 구성요소와 UI를 만들었더라도 다른 사람에게 사용법을 잘 전달하지 못해 잘못 사용되는 경우가 많다.
구현하고 싶은 UI와 그 인코딩은 같은 View로 쉽게 확인할 수 있습니다.Figma, snapshot, 코드를 복사한 문서를 만드는 것보다 최소한 실장자의 각도에서 오류를 줄이고 싶습니다.