"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", blockquote: "blockquote", br: "br", code: "code", div: "div", figure: "figure", h2: "h2", h3: "h3", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }, {MDXImage} = _components; if (!MDXImage) _missingMdxReference("MDXImage", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["이전에 참여했던 프로젝트에서는 대부분 ", _jsx(_components.code, { children: "Tailwind CSS" }), "를 사용했었어요.\n기존에 사용하고 있던 스타일 라이브러리여서, 짧은 개발 기간 때문에 사용 경험이 많은 라이브러리를 선택해야 해서 등 다양한 이유가 있었어요."] }), "\n", _jsxs(_components.p, { children: ["최근에 새로운 프로젝트를 시작하면서 여러 스타일 라이브러리를 검토해보게 되었는데,", _jsx(_components.br, {}), "\n", _jsx(_components.code, { children: "Tailwind CSS" }), "를 사용하면서 느낀 고질적인 낮은 가독성과 유지보수와 재사용성을 고려한 스타일과 컴포넌트의 관심사 분리 등 여러 이유로\n", _jsx(_components.code, { children: "Vanilla Extract" }), "를 도입하기로 했어요."] }), "\n", _jsx(_components.h2, { children: "여는 글" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "Vanilla Extract" }), "는 ", _jsx(_components.a, { href: "https://vanilla-extract.style/", children: "공식 문서" }), "에서 다음과 같이 소개하고 있어요."] }), "\n", _jsx(_components.div, { children: _jsxs(_components.blockquote, { className: "blockquote", children: ["\n", _jsxs(_components.p, { children: ["Zero-runtime Stylesheets in TypeScript.", _jsx(_components.br, {}), "\n", "타입스트립트를 활용한 제로 런타임 스타일시트입니다."] }), "\n"] }) }), "\n", _jsx(_components.h3, { children: "제로 런타임?" }), "\n", _jsxs(_components.p, { children: ["브라우저는 웹 페이지를 렌더링하면서 ", _jsx(_components.code, { children: "HTML" }), "의 ", _jsx(_components.code, { children: "DOM" }), "트리와 ", _jsx(_components.code, { children: "CSS" }), " 파일의 ", _jsx(_components.code, { children: "CSSOM" }), "트리를 결합하는 과정을 진행해요.\n만약 CSS 파일의 크기가 크다면 이 과정이 늦어지면서 렌더링 블로킹이 발생하게 돼요."] }), "\n", _jsxs(_components.p, { children: ["이러한 블로킹을 막기 위해 JS 코드 내에서 CSS를 작성하고 런타임 환경에 동적으로 스타일을 추가하는 ", _jsx(_components.code, { children: "CSS-in-JS" }), "가 등장했지만, 복잡한 스타일을 추가하는 경우\n다시 런타임 오버로드가 발생하는 상황이 생기게 됐어요."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "Vanilla Extract" }), "와 같은 ", _jsx(_components.code, { children: "Zero-runtime CSS-in-JS" }), "는 JS,TS 코드 내에서 작성한 CSS를 빌드시에 정적 파일로 만들어둠으로써 런타임 환경에서의 지연을 ", _jsx(_components.code, { children: "Zero" }), "로 만들었어요."] }), "\n", _jsx(_components.h3, { children: "스타일시트와 타입스크립트?" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "Vanilla Extract" }), "는 다른 ", _jsx(_components.code, { children: "CSS-in-JS" }), "와는 다르게 타입스크립을 지원하는 것이 아니라 타입스크립트 기반으로 설계되었기 때문에 타입스크립트와의 연동이 자연스러워요.", _jsx(_components.br, {}), "\n", "때문에 타입스크립트의 정적 타입 체크를 통해 자동완성, 타입 오류 감지, 오타 방지와 같은 기능을 제공해요."] }), "\n", _jsx(_components.h2, { children: "설치 및 Reset CSS 설정" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "Tailwind CSS" }), "로 초기 세팅 되어있던 프로젝트를 마이그레이션 하면서 ", _jsx(_components.code, { children: "Vanilla Extract" }), " 사용법에 대해 알아볼게요.\n두 패키지를 동시에 사용하면 에러가 발생하기 때문에, 먼저 ", _jsx(_components.code, { children: "Tailwind CSS" }), " 패키지를 제거할게요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "bash", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "bash", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "npm" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " uninstall" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " tailwindcss" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "npm" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " uninstall" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " autoprefixer" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "npm" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " uninstall" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " postcss" })] })] }) }) }), "\n", _jsxs(_components.p, { children: ["이제 ", _jsx(_components.code, { children: "global.css" }), " 또는 ", _jsx(_components.code, { children: "index.css" }), "에서 ", _jsx(_components.code, { children: "tailwind" }), " 지시어를 제거해주세요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "css", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "css", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "@tailwind" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " base;" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "@tailwind" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " components;" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "@tailwind" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " utilities;" })] })] }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "tailwind.config.js/ts" }), "와 ", _jsx(_components.code, { children: "postcss.config.js/ts" }), "등 ", _jsx(_components.code, { children: "tailwind" }), " 설정 파일들을 제거해주세요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "bash", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "bash", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "rm" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " tailwind.config.ts" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "rm" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " postcss.config.js" })] })] }) }) }), "\n", _jsxs(_components.p, { children: ["이제 ", _jsx(_components.code, { children: "Tailwind CSS" }), "를 완전히 삭제했고 ", _jsx(_components.code, { children: "Vanilla Extract" }), "를 설치할 수 있어요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "bash", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "bash", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "npm" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " install" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " @vanilla-extract/css" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "npm" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " install" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " --save-dev" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " @vanilla-extract/vite-plugin" })] })] }) }) }), "\n", _jsxs(_components.p, { children: ["저는 ", _jsx(_components.code, { children: "vite" }), "와 ", _jsx(_components.code, { children: "react-ts" }), "로 생성한 프로젝트에 적용할거기 때문에 ", _jsx(_components.code, { children: "vanilla-extract" }), "와 ", _jsx(_components.code, { children: "vanilla-extract/vite-plugin" }), "을 설치해줬어요.", _jsx(_components.br, {}), "\n", "(각자 빌드 환경에 맞게 플러그인을 추가해주면 돼요.)"] }), "\n", _jsxs(_components.p, { children: ["이제 ", _jsx(_components.code, { children: "vite.config.ts" }), "에 플러그인을 import 해줄게요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "TypeScript", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "TypeScript", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "export default defineConfig({" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: " plugins: [" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: " ...," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: " vanillaExtractPlugin()" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: " ]," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "});" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["이제 ", _jsx(_components.a, { href: "https://5ceanward.tistory.com/38", children: "Ocean님의 포스트" }), "를 참고해 Reset CSS를 적용할게요.", _jsx(_components.br, {}), "\n", "먼저 ", _jsx(_components.code, { children: "global.css" }), "가 위치한 디렉토리에 ", _jsx(_components.code, { children: "layers.css.ts" }), "와 ", _jsx(_components.code, { children: "reset.css.ts" }), "를 추가해줄게요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// layers.css.ts" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { layer } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@vanilla-extract/css\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " reset" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " layer" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"reset\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " components" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " layer" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"components\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] })] }) }) }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// reset.css.ts" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { globalStyle } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@vanilla-extract/css\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " *" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " as" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " layers " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./layers.css.ts\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "/**" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * 'display' 속성만 제외한 모든 \"User-Agent-StyleSheet\" 스타일을 제거합니다." }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * - \"symbol *\" 부분은 Firefox에서 발생하는 SVG 스프라이트 버그를 해결하기 위한 것입니다." }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * - \"html\" 요소는 제외되며, 그렇지 않으면 Chrome에서 CSS 하이픈(hyphens) 속성이 망가지는 버그가 발생합니다." }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * (관련 문제: https://github.com/elad2412/the-new-css-reset/issues/36)." }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " *" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * Remove all the styles of the \"User-Agent-Stylesheet\", except for the" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * 'display' property" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " *" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * - The \"symbol *\" part is to solve Firefox SVG sprite bug" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * - The \"html\" element is excluded, otherwise a bug in Chrome breaks the CSS" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "globalStyle" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *))\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@layer\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [layers.reset]: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " all: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"unset\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " display: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"revert\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "/**" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * 기본 box-sizing border-box로 설정" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * Preferred box-sizing value" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "globalStyle" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"*, *::before, *::after\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@layer\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [layers.reset]: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " boxSizing: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"border-box\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "/**" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * 모바일 사파리에서 가로 모드로 전환할 때 글꼴 크기가 자동으로 커지는 현상을 방지" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * Fix mobile Safari increase font-size on landscape mode" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "globalStyle" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"html\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@layer\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [layers.reset]: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " MozTextSizeAdjust: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"none\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " WebkitTextSizeAdjust: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"none\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " textSizeAdjust: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"none\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "/**" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * a 태그와 button 태그에 pointer 재적용" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * Reapply the pointer cursor for anchor tags" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "globalStyle" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"a, button\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@layer\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [layers.reset]: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " cursor: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"pointer\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "/**" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * 리스트 스타일 제거 (불릿/넘버)" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * Remove list styles (bullets/numbers)" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "globalStyle" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"ol, ul, menu, summary\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@layer\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [layers.reset]: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " listStyle: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"none\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "/**" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * 이미지 요소가 컨테이너의 크기를 넘지 않도록 설정" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * For images to not be able to exceed their container" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "globalStyle" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"img\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@layer\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [layers.reset]: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " maxInlineSize: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"100%\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " maxBlockSize: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"100%\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "/**" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * 테이블 셀 사이의 기본 간격을 제거" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * Removes spacing between cells in tables" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "globalStyle" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"table\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@layer\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [layers.reset]: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " borderCollapse: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"collapse\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "/**" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * 사파리 브라우저에서 user-select:none을 적용할 때 발생할 수 있는 문제를 방지하고, 텍스트 입력 요소가 정상적으로 동작" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * Safari - solving issue when using user-select:none on the text input" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * doesn't working" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "globalStyle" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"input, textarea\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@layer\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [layers.reset]: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " WebkitUserSelect: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"auto\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "/**" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * 사파리 브라우저에서 textarea 요소의 white-space 속성을 기본값으로 되돌리기 위해 사용됩니다." }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * Revert the 'white-space' property for textarea elements on Safari" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "globalStyle" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"textarea\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@layer\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [layers.reset]: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " whiteSpace: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"revert\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "/**" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * meter 태그 사용을 위한 최소한의 스타일 설정" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * Minimum style to allow to style meter element" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "globalStyle" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"meter\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@layer\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [layers.reset]: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " WebkitAppearance: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"revert\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " appearance: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"revert\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "/**" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * pre 태그의 브라우저 기본 스타일을 복원, box-sizing border-box 설정" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * Preformatted text - use only for this feature" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "globalStyle" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\":where(pre)\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@layer\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [layers.reset]: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " all: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"revert\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " boxSizing: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"border-box\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "/**" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * input의 placeholder의 컬러를 지정하지 않음" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * Reset default text opacity of input placeholder" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "globalStyle" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"::placeholder\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@layer\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [layers.reset]: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " color: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"unset\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "/**" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * hidden 속성을 가진 요소의 display none을 적용" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * Fix the feature of 'hidden' attribute. display:revert; revert to element" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * instead of attribute" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "globalStyle" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\":where([hidden])\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@layer\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [layers.reset]: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " display: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"none\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "/**" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * contenteditable 요소의 편집 기능이 제대로 동작하도록 설정" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * Revert for bug in Chromium browsers" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " *" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * - Fix for the content editable attribute will work properly." }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * - Webkit-user-select: auto; added for Safari in case of using user-select:none" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * on wrapper element" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "globalStyle" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "':where([contenteditable]:not([contenteditable=\"false\"]))'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // @ts-expect-error: -webkit-line-break is a non-standard property" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@layer\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [layers.reset]: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " MozUserModify: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"read-write\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " WebkitUserModify: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"read-write\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " overflowWrap: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"break-word\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " WebkitLineBreak: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"after-white-space\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " WebkitUserSelect: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"auto\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "/**" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * draggable 속성이 있는 요소에서 드래그 기능이 제대로 작동하도록 설정" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * Apply back the draggable feature - exist only in Chromium and Safari" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "globalStyle" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "':where([draggable=\"true\"])'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@layer\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [layers.reset]: {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // @ts-expect-error: -webkit-user-drag is a non-standard property" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " WebkitUserDrag: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"element\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "/**" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * modal의 기본 동작 복원" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " * Revert Modal native behavior" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " */" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "globalStyle" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\":where(dialog:modal)\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@layer\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [layers.reset]: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " all: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"revert\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " boxSizing: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"border-box\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["이제 ", _jsx(_components.code, { children: "global.css" }), " 파일을 ", _jsx(_components.code, { children: "global.css.ts" }), "로 변경해서 작성한 파일들을 import 해줄게요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// global.css.ts" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./layers.css\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./reset.css\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] })] }) }) }), "\n", _jsxs(_components.p, { children: ["마지막으로 ", _jsx(_components.code, { children: "main.tsx" }), " 또는 ", _jsx(_components.code, { children: "App.tsx" }), "와 같은 최상위 컴포넌트에 ", _jsx(_components.code, { children: "global.css.ts" }), "를 import 해주면 Reset CSS를 설정할 수 있어요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { StrictMode } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { createRoot } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react-dom/client\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./global.css.ts\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "createRoot" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(document." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "getElementById" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"root\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ")" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "!" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ")." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "render" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "StrictMode" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "App" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" }) })] }) }) }), "\n", _jsx(_components.h2, { children: "적용하기" }), "\n", _jsxs(_components.p, { children: ["다음과 같이 ", _jsx(_components.code, { children: "Tailwind CSS" }), "로 작성된 컴포넌트를 ", _jsx(_components.code, { children: "Vanilla Extract" }), "로 변경해볼게요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " NavigationBar" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "nav" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"flex p-4 gap-4 bg-gray-300\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "NavLink" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " to" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"/\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{({ " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "isActive" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }) " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (isActive " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "?" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"text-red-500\"" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " :" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ")}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " >" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Home" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " // ..." }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["먼저 ", _jsx(_components.code, { children: "css.ts" }), " 파일을 만들어 주고 똑같은 스타일을 작성하고 export 해줘요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// navigationBar.css.ts" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { style } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@vanilla-extract/css\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " container" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " style" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " display: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"flex\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " padding: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"16px\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " gap: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"16px\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " backgroundColor: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"gray\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " activeLink" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " style" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " color: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"red\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) })] }) }) }), "\n", _jsx(_components.p, { children: "그리고 작성한 스타일을 import 해서 컴포넌트에 적용해줄게요." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// NavigationBar.tsx" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { NavLink } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react-router-dom\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { container, activeLink } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./navigationBar.css\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " NavigationBar" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "nav" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{container}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "NavLink" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " to" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"/\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{({ " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "isActive" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }) " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (isActive " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "?" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " activeLink " }), _jsx(_components.span, { style: { color: "#F97583" }, children: ":" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ")}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " >" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Home" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " // ..." }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsx("p", {}), "\n", _jsx(MDXImage, { src: "/posts/vanilla-extract/before_globalstyle.png", width: "300px", alt: "Vanilla Extract로 적용한 CSS", caption: "Vanilla Extract로 적용한 CSS" }), "\n", _jsx(_components.h2, { children: "전역 변수 설정하기" }), "\n", _jsxs(_components.p, { children: ["Vanilla Extract의 ", _jsx(_components.code, { children: "createGlobalTheme" }), " 메서드를 이용해서 설정할 수 있어요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "typescript", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " vars" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " createGlobalTheme" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\":root\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " colors: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " white: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"#FFFFFF\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["위와 같이 작성하면 ", _jsx(_components.code, { children: "root" }), "에 ", _jsx(_components.code, { children: "vars.color.white" }), "를 ", _jsx(_components.code, { children: "#FFFFFF" }), "로 적용하게 돼요."] }), "\n", _jsxs(_components.p, { children: ["이제 적용할 컬러 토큰을 ", _jsx(_components.code, { children: "global.css.ts" }), "에서 전역 변수를 설정해볼게요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// global.css.ts" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./layers.css\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./reset.css\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " vars" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " createGlobalTheme" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\":root\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " colors: {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " gray: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " 10" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"#F7F7F9\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " 20" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"#E5E5EA\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // ..." }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " blue: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " 10" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"#EDF0FF\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " 20" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"#C5D0FF\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // ..." }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // ..." }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) })] }) }) }), "\n", _jsx(_components.p, { children: "설정한 전역 변수를 스타일에서 적용해볼게요." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { style } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@vanilla-extract/css\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { vars } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"../../../app/global.css\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " container" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " style" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " display: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"flex\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " padding: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"16px\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " gap: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"16px\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " backgroundColor: vars.colors.gray[" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "70" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "]," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " activeLink" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " style" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " color: vars.colors.blue[" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "50" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "]," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) })] }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "container" }), "의 ", _jsx(_components.code, { children: "backgroundColor" }), "를 ", _jsx(_components.code, { children: "vars.colors.gray[70]" }), "인 ", _jsx(_components.code, { children: "#636366" }), "를 적용했고,", _jsx(_components.br, {}), "\n", _jsx(_components.code, { children: "activeLink" }), "의 ", _jsx(_components.code, { children: "color" }), "를 ", _jsx(_components.code, { children: "vars.colors.blue[50]" }), "인 ", _jsx(_components.code, { children: "#457AFF" }), "를 적용했어요."] }), "\n", _jsx(MDXImage, { src: "/posts/vanilla-extract/after_globalstyle.png", width: "300px", alt: "createGlobalTheme로 적용한 글로벌 스타일", caption: "createGlobalTheme로 적용한 글로벌 스타일" }), "\n", _jsx(_components.h2, { children: "폰트 설정하기" }), "\n", _jsxs(_components.p, { children: ["프로젝트에서 사용하는 전역 폰트 설정을 해볼게요.", _jsx(_components.br, {}), "\n", "지금 프로젝트에서는 ", _jsx(_components.code, { children: "pretendard" }), "를 사용하기 때문에 ", _jsx(_components.code, { children: "public/fonts/PretendardVariable.woff2" }), "에 파일을 넣어주었어요."] }), "\n", _jsxs(_components.p, { children: ["이제 ", _jsx(_components.code, { children: "text.css.ts" }), " 파일을 생성해줄게요. 전역 폰트 설정은 ", _jsx(_components.a, { href: "https://vanilla-extract.style/documentation/global-api/global-font-face/", children: _jsx(_components.code, { children: "globalFontFace()" }) }), " 메서드를 사용할게요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { globalFontFace, globalStyle } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@vanilla-extract/css\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " pretendardFont" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"Pretendard\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "globalFontFace" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(pretendardFont, {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " src: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'url(\"/fonts/Pretendard-Regular.woff2\") format(\"woff2\")'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " fontWeight: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"400 900\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " fontStyle: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"normal\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "globalStyle" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"body\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@layer\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " base: {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " fontFamily: pretendardFont," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) })] }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "globalFontFace" }), " 메서드는 다음과 같은 CSS를 생성해요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "css", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "css", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "@font-face" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " src" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"/fonts/Pretendard-Regular.woff2\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " font-family" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": pretendardFont;" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "globalStyle" }), " 메서드는 위에서 정의한 폰트 패밀리의 ", _jsx(_components.code, { children: "pretendardFont" }), "를 ", _jsx(_components.code, { children: "body" }), "에 적용해줘요.", _jsx(_components.br, {}), "\n", "이제 ", _jsx(_components.code, { children: "global.css.ts" }), "에 ", _jsx(_components.code, { children: "text.css" }), "를 import 해주면 돼요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "typescript", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { createGlobalTheme } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@vanilla-extract/css\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./layers.css\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./reset.css\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./text.css\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "; " }), _jsx(_components.span, { style: { color: "#6A737D" }, children: "// 추가" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// ..." }) })] }) }) }), "\n", _jsx("p", {}), "\n", _jsx(MDXImage, { src: "/posts/vanilla-extract/before_font.png", width: "500px", alt: "localhost:5173/", caption: "전역 폰트 적용 전" }), "\n", _jsx("p", {}), "\n", _jsx(MDXImage, { src: "/posts/vanilla-extract/after_font.png", width: "500px", alt: "localhost:5173/", caption: "전역 폰트 적용 후" }), "\n", _jsx(_components.h2, { children: "CSS 선택자 사용하기" }), "\n", _jsxs(_components.p, { children: ["Vanilla Extract 에서는 ", _jsx(_components.a, { href: "https://vanilla-extract.style/documentation/styling/#selectors", children: _jsx(_components.code, { children: "Selectors" }) }), " 메서드를 통해 CSS 선택자를 작성할 수 있어요."] }), "\n", _jsx(_components.div, { children: _jsxs(_components.blockquote, { className: "blockquote", children: ["\n", _jsxs(_components.p, { children: ["주요 선택자", _jsx(_components.br, {}), "\n", _jsx(_components.code, { children: ":" }), " 콜론 - 의사 클래스 선택자", _jsx(_components.br, {}), "\n", _jsx(_components.code, { children: "&" }), " 앰퍼샌드 - 현자 선택자 참조", _jsx(_components.br, {}), "\n", _jsx(_components.code, { children: "+" }), " 플러스 - 인접 형제 선택자", _jsx(_components.br, {}), "\n", _jsx(_components.code, { children: "~" }), " 틸드 - 형제 선택자"] }), "\n"] }) }), "\n", _jsx(_components.p, { children: "CSS 선택자를 이용해 스타일을 추가할 컴포넌트를 먼저 생성해줄게요." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { container } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./TestInput.css\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " TestInput" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{container}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "label" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">테스트" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " type" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"checkbox\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.p, { children: "이제 스타일을 적용할게요." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "typescript", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { style } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@vanilla-extract/css\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " container" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " style" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " display: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"flex\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " alignItems: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"center\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " border: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"2px solid black\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " padding: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"10px\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " borderRadius: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"6px\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " gap: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"10px\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) })] }) }) }), "\n", _jsx(MDXImage, { src: "posts/vanilla-extract/default.png", width: "300px", alt: "스타일을 적용한 컴포넌트", caption: "스타일을 적용한 컴포넌트" }), "\n", _jsx(_components.p, { children: "사용방법은 다음과 같아요:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "의사 클래스" }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "typescript", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { style } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@vanilla-extract/css\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " container" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " style" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \":hover\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " backgroundColor: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"black\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " color: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"white\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) })] }) }) }), "\n", _jsx(MDXImage, { src: "posts/vanilla-extract/hover.png", width: "300px", alt: ":hover", caption: ":hover" }), "\n", _jsxs(_components.p, { children: ["Vanilla Extract 에서 CSS 선택자는 ", _jsx(_components.code, { children: ":" }), "로만 시작해야 하기 때문에 간단한 의사 클래스만 작성할 수 있어요."] }), "\n", _jsxs(_components.ol, { start: "2", children: ["\n", _jsx(_components.li, { children: "복잡한 선택자" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["만약 복잡한 선택자를 사용하고 싶다면, ", _jsx(_components.code, { children: "Selectors" }), " 메서드 내부에 선택자를 작성할 수 있어요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "typescript", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { style } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@vanilla-extract/css\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " container" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " style" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " display: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"flex\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " alignItems: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"center\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " gap: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"8px\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " selectors: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "`&:has(${" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "input" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "}:checked)`" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "]: {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " backgroundColor: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"yellow\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) })] }) }) }), "\n", _jsx(MDXImage, { src: "posts/vanilla-extract/checked.png", width: "300px", alt: "&:has(input:checked)", caption: "&:has(input:checked)" }), "\n", _jsx(_components.h2, { children: "닫는 글" }), "\n", _jsxs(_components.p, { children: ["이렇게 해서 간단하게 ", _jsx(_components.code, { children: "Vanilla Extract" }), "를 적용해보았는데 사용해보지 않은 기능들이 많지만 스타일을 따로 관리하는 방식이 ", _jsx(_components.code, { children: "Tailwind CSS" }), "보다 훨씬 깔끔하고 개발 친화적으로 느껴졌고,\n타입스크립트를 통한 정적 타입 검사와 스타일 자동완성 기능도 좋은점으로 느껴지게 많드는 기능중에 하나였어요."] }), "\n", _jsxs(_components.p, { children: ["앞으로 계속 사용하면서 ", _jsx(_components.code, { children: "Vanilla Extract" }), "에 대해 깊게 이해하고 싶다는 생각이 들었어요."] }), "\n", _jsx(_components.h2, { children: "출처" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://vanilla-extract.style/", children: "https://vanilla-extract.style/" }), _jsx(_components.br, {}), "\n", _jsx(_components.a, { href: "https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes", children: "https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes" }), _jsx(_components.br, {}), "\n", _jsx(_components.a, { href: "https://bepyan.github.io/blog/2022/css-in-js", children: "https://bepyan.github.io/blog/2022/css-in-js" }), _jsx(_components.br, {}), "\n", _jsx(_components.a, { href: "https://5ceanward.tistory.com/38", children: "https://5ceanward.tistory.com/38" }), _jsx(_components.br, {}), "\n", _jsx(_components.a, { href: "https://velog.io/@thewronghand/1024-from-tailwind-to-vanilla-extract-%EB%A7%88%EC%9D%B4%EA%B7%B8%EB%A0%88%EC%9D%B4%EC%85%98-%ED%9B%84%EA%B8%B0", children: "https://velog.io/@thewronghand/1024-from-tailwind-to-vanilla-extract-마이그레이션-후기" })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

Vanilla Extract 설치 및 적용 후기