---
title: "AstroをTailwind CSSが利用できるようにセットアップする方法"
canonical_url: "https://olein-design.com/blog/get-started-tailwind-css-on-astro"
language: "ja"
date_published: "2024-04-27T14:19:30+09:00"
date_modified: "2024-04-27T14:19:31+09:00"
content_type: "post"
author: "久野晃司"
taxonomies:
  category:
    - "備忘録"
  post_tag:
    - "Astro"
    - "Tailwind CSS"
---

# AstroをTailwind CSSが利用できるようにセットアップする方法

この記事に辿り着いた方であれば、Astro（アストロ）がどんなものなのか、ざっくりとでもご存知かと思います。

Astroは公式サイトのドキュメントから引用すると、

> ブログやマーケティング、eコマースなど、**コンテンツ駆動のウェブサイト**を作成するためのウェブフレームワークです。
>
>  [Astroを選ぶ理由](https://docs.astro.build/ja/concepts/why-astro/)

とあります。僕が初めて触った時はまだバージョンが 1.0 になるかならない時期だった記憶ですが、本記事執筆時では 4.7 が最新のバージョンとなっています。

SNS などで Astro の動きをたまに確認していますが、バージョンアップの頻度は高めで、都度機能追加がされているように感じます。そういった動向も確認しつつ、Astro を楽しんでいけると良いのかもしれませんね。

この記事では、Astro で静的なページを構築するベースを作ってみます。といっても、とても簡単なのですが、

1. Astro をインストールする
2. Tailwind CSS を利用できるようにする

この1つの流れを紹介します。この他にも追加できるインテグレーションはたくさん用意されています。プロジェクトに必要なものを簡単に導入できる仕組みを用意しているので、ぜひ確認してみてください。

[埋め込みコンテンツ](https://docs.astro.build/ja/guides/integrations-guide)

## 環境紹介

以下の環境で進めています。

- M1 Mac mini
- node v20.12.1
- npm 10.5.0

## Astroをインストールする

それではまず、Astroをインストールしていきます。任意の場所にディレクトリを作ります。今回は簡単に試すためにデスクトップに `astro-taiwind-css` というディレクトリを用意しました。手動で作ってもコマンドラインで作ってもどちらでもOKです。

```
$ cd Desktop
$ mkdir astro-tailwind-css
$ cd astro-tailwind-css
```

それではコマンドラインから Astro をインストールしていきます。ここでは npm を使っていますが、[pnpm や Yarn を使われる方は公式ドキュメント](https://docs.astro.build/ja/install/auto/#1-%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E3%82%A6%E3%82%A3%E3%82%B6%E3%83%BC%E3%83%89%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B)を参考にしてください。

```
$ npm create astro@latest
```

すると、ターミナルの中でインストールするバージョンなどが紹介されます。そして、最初にこのように質問されます。（以下、流れは執筆時のバージョンでの内容となります）

> Where should we create your new project?
>
>  （どこに新しいプロジェクトを作成しますか？）

すでに `astro-tailwind-css` というプロジェクトのディレクトリの中で実行しているので、ここではルートを指せば良いです。

```
./
```

と入力します。

> How would you like to start your new project?
>
>  - Include sample files
> - Use blog template
> - Empty
>
>  （どのように新しいプロジェクトを始めたいですか？）

今回はプレーンな状態で Taiwind CSS を試すことができる環境を用意することが目的なので、`Empty` （空っぽという意味）を選びいます。矢印キーで切り替えましょう。

> Do you plan to write TypeScript?
>
>  （TypeScript で書く計画はありますか？）

TypeScript は今回は使わないので `No` を選択します。（そもそも TypeScript よくわかってない…

ちなみに、No を選んでも「心配ないよ！Astro はデフォルトで TypeScript をサポートしているけど、JavaScriptで書き続けることは自由だよ！」みたいに励ましてくれます。

> Install dependencies?
>
>  （依存するファイルをインストールしますか？）

Astro を使う上で必要となる依存ファイルをインストールするかどうかを聞かれます。僕は `Yes` を選択しました。

> Initialize a new git repository?
>
>  （新しい Git レポジトリを作成しますか？）

今回は実験的に Tailwind CSS を使ってみる環境を用意するだけなので `No` を選択します。

ここまで入力をすると、プロジェクトの作成が進みますので、コマンドラインを見ておきましょう。

> Liftoff confirmed. Explore your project!
>
>  （発射を確認しました。あなたのプロジェクトを探求しよう！）

おそらく Astro は Astronaut（宇宙飛行士）を由来とする言葉なのかなと思います。実際にコマンドラインでコメントをくれている元が「Houston:」とあるので、NASA があるヒューストンなんだと思います。（豆）

メッセージにもありますが、ここまで進むと `npm run dev` などコマンドを実行して開発を進めることができます。

実際にコマンドラインで以下を実行してみます。

```
$ npm run dev
```

すると、

```
 astro  v4.7.0 ready in 105 ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose
```

このようなメッセージが表示されるはずです。Local でサーバーが立ち上がり、ブラウザでアクセスすると、雛形のファイルの表示を確認することができます。

![](https://olein-design.com/wp-content/uploads/2024/04/image-3-1024x590.png)

下に黒くちょろっと現れているのは、Astro で開発する際に利用できるツールや設定などが行える箇所になります。本記事では触れません。

実際に `/src/pages/index.astro` ファイルを編集してみると、保存するたびにリアルタイムで変更がブラウザに反映されることが確認できると思います。開発環境を停止する場合は、Mac の場合だと `Control + C` となります。

これで Astro でコーディングをする最低限の環境は整いました。

## Tailwind CSS を利用できるようにする

それでは Taiwind CSS を利用できるように設定を変更していきます。

Astro の公式サイトでも「公式インテグレーション」として Tailwind CSS が紹介されているので、スムーズに利用が可能です。

[埋め込みコンテンツ](https://docs.astro.build/ja/guides/integrations-guide/#%E5%85%AC%E5%BC%8F%E3%82%A4%E3%83%B3%E3%83%86%E3%82%B0%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3)

![](https://olein-design.com/wp-content/uploads/2024/04/astro-integration-1024x590.png)

実際にドキュメントに沿って進めていきます。

[埋め込みコンテンツ](https://docs.astro.build/ja/guides/integrations-guide/tailwind)

公式インテグレーションを利用する場合には `astro add` というコマンドを利用することができます。今回は Tailwind CSS を利用したいので、以下のようなコマンドになります。

```
$ npx astro add tailwind
```

すると、

> Astro will run the following command:
> If you skip this step, you can always run it yourself later
>
>  npm install @astrojs/tailwind@^5.1.0 tailwindcss@^3.4.3
>
>  Continue?
>
>  （Astroが以下のコマンドを実行しようとしています。続けますか？）

と聞かれます。ここで実行しない場合には、自分でコマンドを実行しなくてはならないので、やってもらっておけば良いかなと思います。

続いて、

> Astro will generate a minimal ./tailwind.config.mjs file.
>
>  Continue?
>
>  （Astro は `./tailwind.config.mjs` ファイルを生成しようとしています。続けますか？

と聞かれます。先ほどと同じく自分で作るのも面倒なのでお願いします。

> Astro will make the following changes to your config file:
>
>  （Astro はあなたの設定ファイルに以下のような変更を加えます。続けますか？

と聞かれるので続けます。（続けない場合は自分で書き込む必要があります。）

> Added the following integration to your project: - @astrojs/tailwind

これで追加が完了しました。

再度、開発環境を立ち上げてみます。すると、先ほどと見た目が変わっていることが確認できます。

![](https://olein-design.com/wp-content/uploads/2024/04/image-4-1024x590.png)

明らかに h1 タグの Astro という文字が小さくなっていることがわかります。ソースを見るとわかるのですが、これは Tailwind CSS のリセットが効いているからです。

実験的に、`index.astro` の h1 タグに以下のような CSS クラスを付与してみましょう。

```
text-2xl bg-gray-200 p-4 font-bold text-indigo-900
```

実際にはこのようなコードになっています。

```
<h1 class="text-2xl bg-gray-200 p-4 font-bold text-indigo-900">Astro</h1>
```

入力しながらクラス名ごとに保存をしていると、自動的にリロードされブラウザに反映されていく様子を確認することができます。とても簡単に試すことができますね。

![](https://olein-design.com/wp-content/uploads/2024/04/image-5-1024x590.png)*上記コードを入力した結果*

他にも細やかな設定が可能になっているので、ドキュメントを参照してみると新しい気づきがありそうです。

そして、こちらのチートシートサイトはご存知の方も多いと思いますが、めちゃくちゃ便利です。

[埋め込みコンテンツ](https://nerdcave.com/tailwind-cheat-sheet)

## まとめ

このように簡単に Astro で静的なページを作る環境を用意することができました。今回は Tailwind CSS を導入しましたが、Astro 特有の便利な機能もたくさんあります。こと CSS に関してだけでも面白い仕組みもあるので、ぜひ実際に試してみたいですね。

[埋め込みコンテンツ](https://docs.astro.build/ja/guides/styling)

また、Astro は Vite を利用しているので、Sass などの CSS プリプロセッサをサポートしています。ですので、簡単にコンパイルする環境を用意することもできます。

[埋め込みコンテンツ](https://docs.astro.build/ja/guides/styling/#css%E3%83%97%E3%83%AA%E3%83%97%E3%83%AD%E3%82%BB%E3%83%83%E3%82%B5)

そして、Vite を使用しているので PostCSS が同封されています。設定ファイルを用意することで Autoprefixer などを利用することもできます。

[埋め込みコンテンツ](https://docs.astro.build/ja/guides/styling/#postcss)

このように手軽に環境を整えることができる Astro、楽しいですね。ぜひお試しください。