번역 완료

docs/02-app/01-building-your-application/04-styling/02-tailwind-css.mdx

@@ -1,43 +1,50 @@
 ---
 title: Tailwind CSS
-description: Style your Next.js Application using Tailwind CSS.
+description: Tailwind CSS를 이용하여 Next.js 애플리케이션을 꾸며보세요.
 ---
 
 <PagesOnly>
 
 <details open>
-  <summary>Examples</summary>
+  <summary>예시</summary>
 
-- [With Tailwind CSS](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss)
+- [Tailwind CSS와 함께](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss)
 
 </details>
 
 </PagesOnly>
 
-[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework that works exceptionally well with Next.js.
+[Tailwind CSS](https://tailwindcss.com/)는 Next.js에서 잘 작동되는 유틸리티 우선의 CSS 프레임워크 입니다.
 
-## Installing Tailwind
+<!-- is a utility-first CSS framework that works exceptionally well with Next.js. -->
 
-Install the Tailwind CSS packages and run the `init` command to generate both the `tailwind.config.js` and `postcss.config.js` files:
+## Tailwind 설치
+
+<!-- Install the Tailwind CSS packages and run the `init` command to generate both the `tailwind.config.js` and `postcss.config.js` files: -->
+
+Tailwind CSS 패키지들을 설치 후 `tailwind.config.js`파일과 `postcss.config.js`파일을 생성하기 위해 `init` 커맨드를 사용합니다.
 
 ```bash filename="Terminal"
 npm install -D tailwindcss postcss autoprefixer
 npx tailwindcss init -p
 ```
 
-## Configuring Tailwind
+## Tailwind 구성하기
 
-Inside `tailwind.config.js`, add paths to the files that will use Tailwind CSS class names:
+<!--
+Inside `tailwind.config.js`, add paths to the files that will use Tailwind CSS class names: -->
+
+`tailwind.config.js` 파일 안에 Tailwind CSS 클래스 이름을 사용할 파일 경로를 추가합니다.
 
 ```js filename="tailwind.config.js"
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
+    './app/**/*.{js,ts,jsx,tsx,mdx}', // `app` 디렉토리를 추가합니다.
     './pages/**/*.{js,ts,jsx,tsx,mdx}',
     './components/**/*.{js,ts,jsx,tsx,mdx}',
 
-    // Or if using `src` directory:
+    //또는 `src` 디렉토리를 사용하는 경우에는:
     './src/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
@@ -47,24 +54,32 @@ module.exports = {
 }
 ```
 
-You do not need to modify `postcss.config.js`.
+<!-- You do not need to modify `postcss.config.js`. -->
+
+`postcss.config.js`를 수정할 필요는 없습니다.
 
-## Importing Styles
+## 스타일 삽입하기
 
-Add the [Tailwind CSS directives](https://tailwindcss.com/docs/functions-and-directives#directives) that Tailwind will use to inject its generated styles to a [Global Stylesheet](/docs/app/building-your-application/styling/css-modules#global-styles) in your application, for example:
+<!-- Add the [Tailwind CSS directives](https://tailwindcss.com/docs/functions-and-directives#directives) that Tailwind will use to inject its generated styles to a [Global Stylesheet](/docs/app/building-your-application/styling/css-modules#global-styles) in your application, for example: -->
+
+Tailwind가 생성된 스타일을 애플리케이션의 [Global Stylesheet](/docs/app/building-your-application/styling/css-modules#global-styles) 에 삽입하기 위해 사용될 [Tailwind CSS directives](https://tailwindcss.com/docs/functions-and-directives#directives)
+을 추가합니다.
+예를 들면 :
 
 ```css filename="app/globals.css"
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 ```
 
-Inside the [root layout](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) (`app/layout.tsx`), import the `globals.css` stylesheet to apply the styles to every route in your application.
+<!-- Inside the [root layout](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) (`app/layout.tsx`), import the `globals.css` stylesheet to apply the styles to every route in your application. -->
+
+[root layout](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) (`app/layout.tsx`) 내에서 `global.css` 스타일 시트를 가져와 애플리케이션의 모든 루트에 스타일을 적용합니다.
 
 ```tsx filename="app/layout.tsx" switcher
 import type { Metadata } from 'next'
 
-// These styles apply to every route in the application
+// 이 스타일은 애플리케이션의 모든 루트에 적용됩니다.
 import './globals.css'
 
 export const metadata: Metadata = {
@@ -86,7 +101,7 @@ export default function RootLayout({
 ```
 
 ```jsx filename="app/layout.js" switcher
-// These styles apply to every route in the application
+// 이 스타일은 애플리케이션의 모든 루트에 적용됩니다.
 import './globals.css'
 
 export const metadata = {
@@ -103,9 +118,11 @@ export default function RootLayout({ children }) {
 }
 ```
 
-## Using Classes
+## 클래스를 이용하기
 
-After installing Tailwind CSS and adding the global styles, you can use Tailwind's utility classes in your application.
+<!-- After installing Tailwind CSS and adding the global styles, you can use Tailwind's utility classes in your application. -->
+
+Tailwind CSS를 설치하고 전역 스타일을 추가한 후 애플리케이션에서 Tailwind의 유틸리티 클래스를 사용할 수 있습니다.
 
 ```tsx filename="app/page.tsx" switcher
 export default function Page() {
@@ -119,6 +136,8 @@ export default function Page() {
 }
 ```
 
-## Usage with Turbopack
+## 터보 팩과 함께 사용
+
+<!-- As of Next.js 13.1, Tailwind CSS and PostCSS are supported with [Turbopack](https://turbo.build/pack/docs/features/css#tailwind-css). -->
 
-As of Next.js 13.1, Tailwind CSS and PostCSS are supported with [Turbopack](https://turbo.build/pack/docs/features/css#tailwind-css).
+Next.js 13.1부터 Tailwind CSS 및 PostCSS는 [터보 팩](https://turbo.build/pack/docs/features/css#tailwind-css)에서 지원됩니다.