Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TailwindCSSの初期設定手順を最新化する #1517

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions documents/contents/guidebooks/how-to-develop/vue-js/css.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ description: Vue.js を用いた クライアントサイドアプリケーシ

# CSS の設定と CSS フレームワークの適用 {#top}

AlesInfiny Maia OSS Edition では、特定の CSS フレームワークを採用することを推奨しているわけではありません。
本章では、一例として Tailwind CSS を導入する手順を紹介しますが、
実際の開発プロジェクトでは、プロジェクトの特性に応じた技術を選定してください。

## CSS の設定 {#settings-css}

Vue.js のブランクプロジェクトを作成すると、デフォルトで以下の 2 つの CSS ファイルが追加されます。
Expand All @@ -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}

Expand Down Expand Up @@ -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: {},
Expand All @@ -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: {},
Expand Down