From 4bd32b8d5aa72c90e924fd1fc129b37c9cba3293 Mon Sep 17 00:00:00 2001
From: Shinya Fujino <shf0811@gmail.com>
Date: Tue, 29 Aug 2023 14:04:13 +0900
Subject: [PATCH 1/3] aedcab56a9a83ea17ce123e2ffab1b24f8be2355

---
 src/content/docs/ja/guides/styling.mdx | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/content/docs/ja/guides/styling.mdx b/src/content/docs/ja/guides/styling.mdx
index 5e8ee3b4186ed..6fb92abe9c109 100644
--- a/src/content/docs/ja/guides/styling.mdx
+++ b/src/content/docs/ja/guides/styling.mdx
@@ -514,6 +514,29 @@ Astroのスタイル方法は、[Markdownレイアウトコンポーネント](/
 
 Tailwindを使用している場合、Markdownのスタイリングには[typographyプラグイン](https://tailwindcss.com/docs/typography-plugin)が便利です。
 
+## 本番環境
+
+### バンドルの調整
+
+Astroが本番環境向けにサイトをビルドする際、CSSはチャンクに結合されます。サイト上の各ページはそれぞれ独自のチャンクとなり、さらに複数のページ間で共有されるCSSは、再利用のために独自のチャンクに分割されます。
+
+各HTMLファイルには、ページが必要とするチャンクごとに`<link rel="stylesheet">`タグが追加されます。
+
+多数のページと複数の異なる共有スタイルをもつサイトは、スタイルシートへのリクエスト数が増加し、サイトのパフォーマンスに影響を与える可能性があります。`inlineStylesheets`オプションを設定することで、外部にリクエストする代わりに（ミニファイされた）スタイルシートを`<style>`タグに入れ、リクエスト数を少なくできます。
+
+```js
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  build: {
+    inlineStylesheets: 'auto'
+  }
+});
+```
+
+`'auto'`オプションは、`vite.build.assetsInlineLimit`のしきい値を下回る数のスタイルシートのみをインライン化し、小さなスタイルシートへのリクエスト数を減らします。すべてのページで使用されるグローバルなスタイルシートなど大きなものは、引き続き外部から取得され、キャッシュされます。このオプションにより、ロードされるスタイルシートの数と、キャッシュされるスタイルのバランスをページ間で調整できます。
+
+このオプションを`'always'`に設定すると、すべてのスタイルシートがインライン化されます。
 
 ## アドバンスド
 

From cf00c99c56ac4a3616921ed0c8b7c488c4d73ce0 Mon Sep 17 00:00:00 2001
From: Shinya Fujino <shf0811@gmail.com>
Date: Tue, 29 Aug 2023 14:10:23 +0900
Subject: [PATCH 2/3] a52460cf5f4ae3f1c96fcded06063cb10b967972

---
 src/content/docs/ja/guides/styling.mdx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/content/docs/ja/guides/styling.mdx b/src/content/docs/ja/guides/styling.mdx
index 6fb92abe9c109..34e126c78220f 100644
--- a/src/content/docs/ja/guides/styling.mdx
+++ b/src/content/docs/ja/guides/styling.mdx
@@ -431,9 +431,22 @@ import "../components/make-it-purple.css"
 
 ## CSSインテグレーション
 
-Astroには、[Tailwind][tailwind]など、人気のCSSライブラリやツール、フレームワークをプロジェクトに追加するための仕組みがあります！
+Astroには、[Tailwind](https://tailwindcss.com)など、人気のCSSライブラリやツール、フレームワークをプロジェクトに追加するための仕組みがあります！
 
-📚 これらのインテグレーションのインストール、インポート、設定の手順については、[インテグレーションガイド](/ja/guides/integrations-guide/)を参照してください。
+### Tailwind
+
+プロジェクトでTailwindを使用するには、公式の[Astro Tailwindインテグレーション][tailwind]を、パッケージマネージャーの`astro add`コマンドを使ってインストールします。
+
+```sh
+# NPMを使う
+npx astro add tailwind
+# Yarnを使う
+yarn astro add tailwind
+# PNPMを使う
+pnpm astro add tailwind
+```
+
+📚 Astroインテグレーションのインストール、インポート、設定の手順については、[インテグレーションガイド](/ja/guides/integrations-guide/)を参照してください。
 
 ## CSSプリプロセッサ
 
@@ -586,7 +599,7 @@ import stylesUrl from '../styles/main.css?url';
 [sass]: https://sass-lang.com/
 [stylus]: https://stylus-lang.com/
 [svelte-style]: https://svelte.dev/docs#component-format-style
-[tailwind]: https://github.com/withastro/astro/tree/main/packages/integrations/tailwind
+[tailwind]: /ja/guides/integrations-guide/tailwind/
 [vite-preprocessors]: https://vitejs.dev/guide/features.html#css-pre-processors
 [vue-css-modules]: https://vue-loader.vuejs.org/guide/css-modules.html
 [vue-scoped]: https://vue-loader.vuejs.org/guide/scoped-css.html

From 5cf8864bbcdf7e28d3b7d24112c3e53b311eae96 Mon Sep 17 00:00:00 2001
From: Shinya Fujino <shf0811@gmail.com>
Date: Tue, 29 Aug 2023 14:25:55 +0900
Subject: [PATCH 3/3] i18n(ja): Update styling.mdx for v3

---
 src/content/docs/ja/guides/styling.mdx | 32 ++++++++++++++++++--------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/content/docs/ja/guides/styling.mdx b/src/content/docs/ja/guides/styling.mdx
index 34e126c78220f..87fa3b78e8b46 100644
--- a/src/content/docs/ja/guides/styling.mdx
+++ b/src/content/docs/ja/guides/styling.mdx
@@ -41,10 +41,10 @@ Astroの`<style>`CSSルールは、**デフォルトで自動的にスコープ
 
 ```astro
 <style>
-  h1:where(.astro-HHNQFKH6) {
-     color: red;
+  h1[data-astro-cid-hhnqfkh6] {
+    color: red;
   }
-  .text:where(.astro-HHNQFKH6) {
+  .text[data-astro-cid-hhnqfkh6] {
     color: blue;
   }
 </style>
@@ -157,7 +157,7 @@ import MyComponent from "../components/MyComponent.astro"
 <MyComponent class="red">This will be red!</MyComponent>
 ```
 
-このパターンでは、子コンポーネントに直接スタイルを設定できます。Astroは、親のスコープ付きクラス名（例：`astro-HHNQFKH6`）を`class`プロパティを通して自動的に渡し、その子を親のスコープに含めます。
+このパターンでは、子コンポーネントに直接スタイルを設定できます。Astroは、親のスコープ付きクラス名（例：`astro-hhnqfkh6`）を`class`プロパティを通して自動的に渡し、その子を親のスコープに含めます。
 
 :::note[親コンポーネントからスコープされたクラス]
 `class`プロパティは親のスコープに子を含むので、親から子へスタイルがカスケードされる可能性があります。このような意図しない副作用を避けるには、子コンポーネントでユニークなクラス名を使用するようにします。
@@ -531,24 +531,36 @@ Tailwindを使用している場合、Markdownのスタイリングには[typogr
 
 ### バンドルの調整
 
-Astroが本番環境向けにサイトをビルドする際、CSSはチャンクに結合されます。サイト上の各ページはそれぞれ独自のチャンクとなり、さらに複数のページ間で共有されるCSSは、再利用のために独自のチャンクに分割されます。
+Astroが本番環境向けにサイトをビルドする際、CSSはミニファイされチャンクへと結合されます。サイト上の各ページはそれぞれ独自のチャンクを取得し、さらに複数のページ間で共有されるCSSは、再利用のために独自のチャンクに分割されます。
+
+しかし、複数のページでスタイルを共有している場合、共有される一部のチャンクが非常に小さくなる場合があります。それらがすべて別々に送信された場合、スタイルシートへのリクエストが増加し、サイトのパフォーマンスに影響を与える可能性があります。そのため、Astroはデフォルトでは、HTML内の4kB以上のスタイルシートのみを`<link rel="stylesheet">`タグとしてリンクし、それ以外のものは`<style type="text/css">`にインライン化します。このアプローチにより、追加のリクエストの数と、ページ間でキャッシュされるCSSの量のあいだのバランスをとることができます。
+
+Viteの`assetsInlineLimit`ビルドオプションを使用して、スタイルシートが外部にリンクされるサイズをバイト単位で設定できます。このオプションは、スクリプトと画像のインライン化にも影響することに注意してください。
+
+```js
+import { defineConfig } from 'astro/config';
 
-各HTMLファイルには、ページが必要とするチャンクごとに`<link rel="stylesheet">`タグが追加されます。
+export default defineConfig({
+  vite: {
+    build: {
+      assetsInlineLimit: 1024,
+    }
+  };
+});
+```
 
-多数のページと複数の異なる共有スタイルをもつサイトは、スタイルシートへのリクエスト数が増加し、サイトのパフォーマンスに影響を与える可能性があります。`inlineStylesheets`オプションを設定することで、外部にリクエストする代わりに（ミニファイされた）スタイルシートを`<style>`タグに入れ、リクエスト数を少なくできます。
+すべてのスタイルシートを外部リンクとしたい場合は、`inlineStylesheets`ビルドオプションを設定します。
 
 ```js
 import { defineConfig } from 'astro/config';
 
 export default defineConfig({
   build: {
-    inlineStylesheets: 'auto'
+    inlineStylesheets: 'never'
   }
 });
 ```
 
-`'auto'`オプションは、`vite.build.assetsInlineLimit`のしきい値を下回る数のスタイルシートのみをインライン化し、小さなスタイルシートへのリクエスト数を減らします。すべてのページで使用されるグローバルなスタイルシートなど大きなものは、引き続き外部から取得され、キャッシュされます。このオプションにより、ロードされるスタイルシートの数と、キャッシュされるスタイルのバランスをページ間で調整できます。
-
 このオプションを`'always'`に設定すると、すべてのスタイルシートがインライン化されます。
 
 ## アドバンスド