diff --git a/docs/02-app/01-building-your-application/04-styling/02-tailwind-css.mdx b/docs/02-app/01-building-your-application/04-styling/02-tailwind-css.mdx index 5338b245d..b5642b956 100644 --- a/docs/02-app/01-building-your-application/04-styling/02-tailwind-css.mdx +++ b/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 애플리케이션을 꾸며보세요. ---
- Examples + 예시 -- [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)
-[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 + -Install the Tailwind CSS packages and run the `init` command to generate both the `tailwind.config.js` and `postcss.config.js` files: +## Tailwind 설치 + + + +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: + + +`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,11 +54,17 @@ module.exports = { } ``` -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: + + +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; @@ -59,12 +72,14 @@ Add the [Tailwind CSS directives](https://tailwindcss.com/docs/functions-and-dir @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. + + +[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. + + +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). +Next.js 13.1부터 Tailwind CSS 및 PostCSS는 [터보 팩](https://turbo.build/pack/docs/features/css#tailwind-css)에서 지원됩니다.