diff options
author | HiDeoo | 2025-04-16 12:49:09 +0000 |
---|---|---|
committer | fredkbot | 2025-04-16 12:49:09 +0000 |
commit | 3a09c838789e4fa9fdbdde36f5569959ff2d3895 (patch) | |
tree | 186b614d9a5417d5b415b2883d9f1f6894a7a7c9 | |
parent | d9bc0f7771c3cba86646b8e0c15e453770af8392 (diff) | |
download | IT.starlight-3a09c838789e4fa9fdbdde36f5569959ff2d3895.tar.gz IT.starlight-3a09c838789e4fa9fdbdde36f5569959ff2d3895.tar.bz2 IT.starlight-3a09c838789e4fa9fdbdde36f5569959ff2d3895.zip |
[ci] format
-rw-r--r-- | docs/src/content/docs/ko/guides/css-and-tailwind.mdx | 123 |
1 files changed, 61 insertions, 62 deletions
diff --git a/docs/src/content/docs/ko/guides/css-and-tailwind.mdx b/docs/src/content/docs/ko/guides/css-and-tailwind.mdx index 5684ee1d..afa258fe 100644 --- a/docs/src/content/docs/ko/guides/css-and-tailwind.mdx +++ b/docs/src/content/docs/ko/guides/css-and-tailwind.mdx @@ -109,98 +109,97 @@ yarn create astro --template starlight/tailwind 1. ๋ค์ ๋ช
๋ น์ ์คํํ๊ณ ํฐ๋ฏธ๋์ ์ง์นจ์ ๋ฐ๋ผ ํ๋ก์ ํธ์ Tailwind๋ฅผ ์ค์ ํฉ๋๋ค. + <Tabs syncKey="pkg"> - <Tabs syncKey="pkg"> + <TabItem label="npm"> - <TabItem label="npm"> - - ```sh - npx astro add tailwind - ``` + ```sh + npx astro add tailwind + ``` - </TabItem> + </TabItem> - <TabItem label="pnpm"> + <TabItem label="pnpm"> - ```sh - pnpm astro add tailwind - ``` + ```sh + pnpm astro add tailwind + ``` - </TabItem> + </TabItem> - <TabItem label="Yarn"> + <TabItem label="Yarn"> - ```sh - yarn astro add tailwind - ``` + ```sh + yarn astro add tailwind + ``` - </TabItem> + </TabItem> - </Tabs> + </Tabs> 2. Starlight์ Tailwind ํธํ์ฑ ํจํค์ง๋ฅผ ์ค์นํฉ๋๋ค. - <Tabs syncKey="pkg"> + <Tabs syncKey="pkg"> - <TabItem label="npm"> + <TabItem label="npm"> - ```sh - npm install @astrojs/starlight-tailwind - ``` + ```sh + npm install @astrojs/starlight-tailwind + ``` - </TabItem> + </TabItem> - <TabItem label="pnpm"> + <TabItem label="pnpm"> - ```sh - pnpm add @astrojs/starlight-tailwind - ``` + ```sh + pnpm add @astrojs/starlight-tailwind + ``` - </TabItem> + </TabItem> - <TabItem label="Yarn"> + <TabItem label="Yarn"> - ```sh - yarn add @astrojs/starlight-tailwind - ``` + ```sh + yarn add @astrojs/starlight-tailwind + ``` - </TabItem> + </TabItem> - </Tabs> + </Tabs> 3. Astro๊ฐ ์ค์บํด๋ฉํ `src/styles/global.css` ํ์ผ์ ์ฝํ
์ธ ๋ฅผ Starlight์์ ํธํ์ฑ์ ์ํด ๋ค์ ์ฝ๋๋ก ๊ต์ฒดํฉ๋๋ค. - ```css - /* src/styles/global.css */ - @layer base, starlight, theme, components, utilities; + ```css + /* src/styles/global.css */ + @layer base, starlight, theme, components, utilities; - @import '@astrojs/starlight-tailwind'; - @import 'tailwindcss/theme.css' layer(theme); - @import 'tailwindcss/utilities.css' layer(utilities); - ``` + @import '@astrojs/starlight-tailwind'; + @import 'tailwindcss/theme.css' layer(theme); + @import 'tailwindcss/utilities.css' layer(utilities); + ``` 4. Tailwind CSS ํ์ผ์ ์ฌ์ฉํ๋๋ก Starlight ๊ตฌ์ฑ์ ์
๋ฐ์ดํธํฉ๋๋ค. - ```js ins={11-12} - // astro.config.mjs - import { defineConfig } from 'astro/config'; - import starlight from '@astrojs/starlight'; - import tailwindcss from '@tailwindcss/vite'; - - export default defineConfig({ - integrations: [ - starlight({ - title: 'Tailwind๋ฅผ ์ฌ์ฉํ ๋ฌธ์', - customCss: [ - // Tailwind ๊ธฐ๋ณธ ์คํ์ผ์ ๊ฒฝ๋ก์
๋๋ค. - './src/styles/global.css', - ], - }), - ], - vite: { plugins: [tailwindcss()] }, - }); - ``` - + ```js ins={11-12} + // astro.config.mjs + import { defineConfig } from 'astro/config'; + import starlight from '@astrojs/starlight'; + import tailwindcss from '@tailwindcss/vite'; + + export default defineConfig({ + integrations: [ + starlight({ + title: 'Tailwind๋ฅผ ์ฌ์ฉํ ๋ฌธ์', + customCss: [ + // Tailwind ๊ธฐ๋ณธ ์คํ์ผ์ ๊ฒฝ๋ก์
๋๋ค. + './src/styles/global.css', + ], + }), + ], + vite: { plugins: [tailwindcss()] }, + }); + ``` + </Steps> ### Tailwind๋ก Starlight ์คํ์ผ๋งํ๊ธฐ |