【AstroJS】 Tailwind CSS のクラス名を自動的にソートする 【VSCode】
1. はじめに
Tailwind CSS は、クラス名を自動的にソートしてくれる Prettier Plugin 1 を公式が提供してくれています。React 系のプロジェクトでは、prettier
パッケージと prettier-plugin-tailwindcss
パッケージをインストールして設定することで、クラス名を自動的にソートすることが出来ます。更に、VSCode と組み合わせることで、ファイル保存時に自動的にクラス名をソートする開発環境も構築することが出来ます。
AstroJS + Tailwind CSS + VSCode の組み合わせで、クラス名を自動的にソート機能を有効にするには、prettier
パッケージと prettier-plugin-tailwindcss
パッケージに加えて prettier-plugin-astro
パッケージの導入が必要など、追加の設定が必要になります 2 。本記事では、その手順について記述します。また、本記事は Node.js と Yarn がインストールされている前提で記述しています。
1$ node -v2v20.11.03$ yarn -v41.22.21
2. テンプレートを生成する
まず初めに、公式ドキュメント 3 4 に従って AstroJS と Tailwind CSS の環境を構築します。具体的には yarn create astro
と yarn astro add tailwind
を実行するだけで、自動的にテンプレートを生成してくれます。
1$ yarn create astro2yarn create v1.22.213[1/4] Resolving packages...4[2/4] Fetching packages...5[3/4] Linking dependencies...6[4/4] Building fresh packages...7
8success Installed "create-astro@4.7.3" with binaries:9 - create-astro10[########################################] 40/4011 astro Launch sequence initiated.12
13 dir Where should we create your new project?14 ./whole-meteor15
16 tmpl How would you like to start your new project?17 Include sample files18
19 ts Do you plan to write TypeScript?20 Yes21
22 use How strict should TypeScript be?23 Strict24
25 deps Install dependencies?26 Yes27
28 git Initialize a new git repository?29 No30 ◼ Sounds good! You can always run git init manually.31
32 ✔ Project initialized!33 ■ Template copied34 ■ TypeScript customized35 ■ Dependencies installed36
37 next Liftoff confirmed. Explore your project!38
39 Enter your project directory using cd ./whole-meteor40 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/chat44
45╭─────╮ Houston:46│ ◠ ◡ ◠ Good luck out there, astronaut! 🚀47╰─────╯48$ cd whole-meteor49$ yarn astro add tailwind50yarn run v1.22.2151warning package.json: No license field52$ astro add tailwind53✔ Resolving packages...5418:32:2455 Astro will run the following command:56 If you skip this step, you can always run it yourself later57
58 ╭───────────────────────────────────────────────────────╮59 │ yarn add @astrojs/tailwind@^5.1.0 tailwindcss@^3.4.1 │60 ╰───────────────────────────────────────────────────────╯61
62✔ Continue? … yes63✔ Installing dependencies...6418:32:2765 Astro will generate a minimal ./tailwind.config.mjs file.66
67✔ Continue? … yes6818:32:2869 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? … yes8318:32:2984 success Added the following integration to your project:85 - @astrojs/tailwind86Done 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 .prettierrc2$ ls -la3total 2444drwxrwxr-x 6 root root 4096 Feb 18 18:44 .5drwxr-xr-x 7 root root 4096 Feb 18 18:30 ..6-rw-r--r-- 1 root root 229 Feb 15 23:11 .gitignore7-rw-r--r-- 1 root root 0 Feb 18 18:44 .prettierrc8drwxrwxr-x 2 root root 4096 Feb 18 18:30 .vscode9-rw-r--r-- 1 root root 2360 Feb 15 23:11 README.md10-rw-r--r-- 1 root root 181 Feb 18 18:32 astro.config.mjs11drwxr-xr-x 400 root root 20480 Feb 18 18:32 node_modules12-rw-r--r-- 1 root root 408 Feb 18 18:32 package.json13drwxrwxr-x 2 root root 4096 Feb 18 18:30 public14drwxrwxr-x 5 root root 4096 Feb 18 18:30 src15-rw-r--r-- 1 root root 176 Feb 18 18:32 tailwind.config.mjs16-rw-r--r-- 1 root root 41 Feb 18 18:30 tsconfig.json17-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
で設定コードが追加されている
-
GitHub, tailwindlabs/prettier-plugin-tailwindcss:https://github.com/tailwindlabs/prettier-plugin-tailwindcss ↩
-
Setup Astro 3.0 with Tailwind CSS Prettier Plugin:https://webreaper.dev/posts/astro-prettier-tailwind-setup/ ↩
-
Astro Docs, Install Astro with the Automatic CLI:https://docs.astro.build/en/install/auto/ ↩
-
Astro Docs, @astrojs/tailwind:https://docs.astro.build/en/guides/integrations-guide/tailwind/ ↩