From 3a09c838789e4fa9fdbdde36f5569959ff2d3895 Mon Sep 17 00:00:00 2001 From: HiDeoo Date: Wed, 16 Apr 2025 12:49:09 +0000 Subject: [ci] format --- .../content/docs/ko/guides/css-and-tailwind.mdx | 123 ++++++++++----------- 1 file 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를 설정합니다. + - + - - - ```sh - npx astro add tailwind - ``` + ```sh + npx astro add tailwind + ``` - + - + - ```sh - pnpm astro add tailwind - ``` + ```sh + pnpm astro add tailwind + ``` - + - + - ```sh - yarn astro add tailwind - ``` + ```sh + yarn astro add tailwind + ``` - + - + 2. Starlight의 Tailwind 호환성 패키지를 설치합니다. - + - + - ```sh - npm install @astrojs/starlight-tailwind - ``` + ```sh + npm install @astrojs/starlight-tailwind + ``` - + - + - ```sh - pnpm add @astrojs/starlight-tailwind - ``` + ```sh + pnpm add @astrojs/starlight-tailwind + ``` - + - + - ```sh - yarn add @astrojs/starlight-tailwind - ``` + ```sh + yarn add @astrojs/starlight-tailwind + ``` - + - + 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()] }, + }); + ``` + ### Tailwind로 Starlight 스타일링하기 -- cgit