【AstroJS】 Tailwind CSS のクラス名を自動的にソートする【VSCode】

1. はじめに

Tailwind CSS は、クラス名を自動的にソートしてくれる Prettier Plugin ¹ を公式が提供してくれています。React 系のプロジェクトでは、prettier パッケージと prettier-plugin-tailwindcss パッケージをインストールして設定することで、クラス名を自動的にソートすることが出来ます。更に、VSCode と組み合わせることで、ファイル保存時に自動的にクラス名をソートする開発環境も構築することが出来ます。

AstroJS + Tailwind CSS + VSCode の組み合わせで、クラス名を自動的にソート機能を有効にするには、prettier パッケージと prettier-plugin-tailwindcss パッケージに加えて prettier-plugin-astro パッケージの導入が必要など、追加の設定が必要になります ² 。本記事では、その手順について記述します。また、本記事は Node.js と Yarn がインストールされている前提で記述しています。

1
$ node -v
2
v20.11.0
3
$ yarn -v
4
1.22.21

2. テンプレートを生成する

まず初めに、公式ドキュメント ³ ⁴ に従って AstroJS と Tailwind CSS の環境を構築します。具体的には yarn create astro と yarn astro add tailwind を実行するだけで、自動的にテンプレートを生成してくれます。

1
$ yarn create astro
2
yarn create v1.22.21
3
[1/4] Resolving packages...
4
[2/4] Fetching packages...
5
[3/4] Linking dependencies...
6
[4/4] Building fresh packages...
7

8
success Installed "create-astro@4.7.3" with binaries:
9
      - create-astro
10
[########################################] 40/40
11
 astro   Launch sequence initiated.
12

13
   dir   Where should we create your new project?
14
         ./whole-meteor
15

16
  tmpl   How would you like to start your new project?
17
         Include sample files
18

19
    ts   Do you plan to write TypeScript?
20
         Yes
21

22
   use   How strict should TypeScript be?
23
         Strict
24

25
  deps   Install dependencies?
26
         Yes
27

28
   git   Initialize a new git repository?
29
         No
30
      ◼  Sounds good! You can always run git init manually.
31

32
      ✔  Project initialized!
33
         ■ Template copied
34
         ■ TypeScript customized
35
         ■ Dependencies installed
36

37
  next   Liftoff confirmed. Explore your project!
38

39
         Enter your project directory using cd ./whole-meteor
40
         Run yarn dev to start the dev server. CTRL+C to stop.
41
         Add frameworks like react or tailwind using astro add.
42

43
         Stuck? Join us at https://astro.build/chat
44

45
╭─────╮  Houston:
46
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
47
╰─────╯
48
$ cd whole-meteor
49
$ yarn astro add tailwind
50
yarn run v1.22.21
51
warning package.json: No license field
52
$ astro add tailwind
53
✔ Resolving packages...
54
18:32:24
55
  Astro will run the following command:
56
  If you skip this step, you can always run it yourself later
57

58
 ╭───────────────────────────────────────────────────────╮
59
 │ yarn add @astrojs/tailwind@^5.1.0 tailwindcss@^3.4.1  │
60
 ╰───────────────────────────────────────────────────────╯
61

62
✔ Continue? … yes
63
✔ Installing dependencies...
64
18:32:27
65
  Astro will generate a minimal ./tailwind.config.mjs file.
66

67
✔ Continue? … yes
68
18:32:28
69
  Astro will make the following changes to your config file:
70

71
 ╭ astro.config.mjs ─────────────────────────────╮
72
 │ import { defineConfig } from 'astro/config';  │
73
 │                                               │
74
 │ import tailwind from "@astrojs/tailwind";     │
75
 │                                               │
76
 │ // https://astro.build/config                 │
77
 │ export default defineConfig({                 │
78
 │   integrations: [tailwind()]                  │
79
 │ });                                           │
80
 ╰───────────────────────────────────────────────╯
81

82
✔ Continue? … yes
83
18:32:29
84
   success  Added the following integration to your project:
85
  - @astrojs/tailwind
86
Done in 8.09s.

3. パッケージをインストールする

次に、パッケージをインストールします。具体的には、prettier、prettier-plugin-tailwindcss、prettier-plugin-astro をインストールします。Yarn を使ってインストールする場合は、以下のコマンドでパッケージをインストールすることが出来ます。

1
$ yarn add --dev prettier prettier-plugin-tailwindcss prettier-plugin-astro

prettier-plugin-tailwindcss と prettier-plugin-astro は Prettier のプラグインなので、パッケージをインストールだけでは動作しません。プラグインを読み込むために、.prettierrc というファイルを AstroJS が生成したディレクトリの直下に作成し、以下のコードを追加します。

1
$ touch .prettierrc
2
$ ls -la
3
total 244
4
drwxrwxr-x   6 root root   4096 Feb 18 18:44 .
5
drwxr-xr-x   7 root root   4096 Feb 18 18:30 ..
6
-rw-r--r--   1 root root    229 Feb 15 23:11 .gitignore
7
-rw-r--r--   1 root root      0 Feb 18 18:44 .prettierrc
8
drwxrwxr-x   2 root root   4096 Feb 18 18:30 .vscode
9
-rw-r--r--   1 root root   2360 Feb 15 23:11 README.md
10
-rw-r--r--   1 root root    181 Feb 18 18:32 astro.config.mjs
11
drwxr-xr-x 400 root root  20480 Feb 18 18:32 node_modules
12
-rw-r--r--   1 root root    408 Feb 18 18:32 package.json
13
drwxrwxr-x   2 root root   4096 Feb 18 18:30 public
14
drwxrwxr-x   5 root root   4096 Feb 18 18:30 src
15
-rw-r--r--   1 root root    176 Feb 18 18:32 tailwind.config.mjs
16
-rw-r--r--   1 root root     41 Feb 18 18:30 tsconfig.json
17
-rw-r--r--   1 root root 183602 Feb 18 18:32 yarn.lock

prettier-plugin-astro と prettier-plugin-tailwindcss の順番を逆にすると正常に動作しないので、順番も大事です。

1
{
2
  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"]
3
}

4. VSCode を設定する

ここからは、VSCode 上での作業になります。まず、VSCode 拡張機能の Prettier をインストールします。本記事では、拡張機能の具体的なインストール手順については割愛します。次に、VSCode の設定ファイル (settings.json) に以下のコードを追加します。以下のコードを追加することで、.astro ファイルのデフォルトコードフォーマットを Prettier に設定する + Prettier が .astro ファイルをコードフォーマット対象と認識するように設定出来ます。

1
{
2
  // .astro ファイルのデフォルトコードフォーマットを Prettier に設定する
3
  "[astro]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
4
  // Prettier が .astro ファイルをコードフォーマット対象と認識する
5
  "prettier.documentSelectors": ["**/*.astro"]
6
}

5. おわりに

以上で作業は全て完了です。あとは、適当な .astro ファイル内に Tailwind CSS のコードを記述して、ソート機能が正常に動作するか確認してください。もし正常に動作しない場合は、以下のリストで抜けが無いか確認してみてください。

@astrojs/tailwind パッケージと tailwindcss パッケージをインストールされている
astro.config.mjs ファイルに Tailwind CSS の設定コードが追加されている
Prettier に関する以下のパッケージがインストールされている
- prettier
- prettier-plugin-tailwindcss
- prettier-plugin-astro
.prettierrc を作成してプラグインを読み込んでいる
VSCode の settings.json で設定コードが追加されている