From b2b207e59ecc1eb6c8855c0cd74822822da7a279 Mon Sep 17 00:00:00 2001
From: kentah <158997636+KentaHizume@users.noreply.github.com>
Date: Wed, 6 Nov 2024 16:31:20 +0900
Subject: [PATCH] =?UTF-8?q?TailwindCSS=E3=81=AE=E5=88=9D=E6=9C=9F=E8=A8=AD?=
 =?UTF-8?q?=E5=AE=9A=E6=89=8B=E9=A0=86=E3=82=92=E6=9C=80=E6=96=B0=E5=8C=96?=
 =?UTF-8?q?=20(#1517)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../guidebooks/how-to-develop/vue-js/css.md       | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/documents/contents/guidebooks/how-to-develop/vue-js/css.md b/documents/contents/guidebooks/how-to-develop/vue-js/css.md
index 4b7a79b07..8be584b41 100644
--- a/documents/contents/guidebooks/how-to-develop/vue-js/css.md
+++ b/documents/contents/guidebooks/how-to-develop/vue-js/css.md
@@ -5,6 +5,10 @@ description: Vue.js を用いた クライアントサイドアプリケーシ
 
 # CSS の設定と CSS フレームワークの適用 {#top}
 
+AlesInfiny Maia OSS Edition では、特定の CSS フレームワークを採用することを推奨しているわけではありません。
+本章では、一例として Tailwind CSS を導入する手順を紹介しますが、
+実際の開発プロジェクトでは、プロジェクトの特性に応じた技術を選定してください。
+
 ## CSS の設定 {#settings-css}
 
 Vue.js のブランクプロジェクトを作成すると、デフォルトで以下の 2 つの CSS ファイルが追加されます。
@@ -29,7 +33,8 @@ import './assets/base.css'
 
 ## Tailwind CSS {#tailwind-css}
 
-Tailwind CSS は、 Web サイトを構築するための CSS フレームワークです。
+Tailwind CSS は、 あらかじめ用意されたユーティリティクラスを組み合わせることで、
+CSS ファイルを記述せずにデザインを実現する、ユーティリティファーストな CSS フレームワークです。
 
 ### Tailwind CSS のインストール {#install-tailwind-css}
 
@@ -70,11 +75,11 @@ npm install -D tailwindcss postcss autoprefixer postcss-nesting
 npx tailwindcss init
 ```
 
-作成された直後の tailwind.config.js は以下のとおりです（Tailwind CSS 3.4.3 の場合）。
+作成された直後の tailwind.config.js は以下のとおりです（Tailwind CSS 3.4.13 の場合）。
 
 ```javascript title="tailwind.config.js"
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
   content: [],
   theme: {
     extend: {},
@@ -85,9 +90,9 @@ module.exports = {
 
 content に、 Tailwind CSS を適用する対象ファイルのパス（ワイルドカード使用可）を設定します。
 
-```javascript title="tailwind.config.js"
+```javascript title="tailwind.config.js" hl_lines="3"
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     extend: {},