Astro: Introduce Tailwind CSS

Tailwind CSS について。

https://gihyo.jp/book/2024/978-4-297-13943-8

Astro で Tailwind CSS 記法を使用してみる。

https://github.com/danny-yamamoto/my-portfolio-astro

https://my-portfolio-astro.pages.dev/

## Version up
- Astro を数ヶ月放置していたので latest にあげる。
```bash
npm install @astrojs/cloudflare@latest
npm install astro@latest
npm install -D prettier prettier-plugin-tailwindcss
npm install -D postcss-import
```

## Set up
- Tailwind CSS を有効にする。
```bash
node ➜ /workspaces/my-portfolio-astro (main) $ npx astro add tailwind
✔ Resolving packages...

  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.1  │
 ╰──────────────────────────────────────────────────────────╯

✔ Continue? … yes
✔ Installing dependencies...

  Astro will generate a minimal ./tailwind.config.mjs file.

✔ Continue? … yes

  Astro will make the following changes to your config file:

 ╭ astro.config.mjs ──────────────────────────────╮
 │ import { defineConfig } from 'astro/config';   │
 │ import cloudflare from "@astrojs/cloudflare";  │
 │ import react from "@astrojs/react";            │
 │                                                │
 │ import tailwind from "@astrojs/tailwind";      │
 │                                                │
 │ // https://astro.build/config                  │
 │ export default defineConfig({                  │
 │   output: "server",                            │
 │   adapter: cloudflare(),                       │
 │   integrations: [react(), tailwind()]          │
 │ });                                            │
 ╰────────────────────────────────────────────────╯

✔ Continue? … yes
  
   success  Added the following integration to your project:
  - @astrojs/tailwind
node ➜ /workspaces/my-portfolio-astro (main) $ 
```

- `Tailwind CSS IntelliSense` [^1] を VSCode に install する。
![alt text](/images/fd3b6d51ab75b7-a.png)

- Prettier Plugin を追加する。
```bash
npm install -D prettier prettier-plugin-tailwindcss
touch .prettierrc
touch .prettierignore
touch .prettierrc.js
```

## Use Tailwind CSS
- commandline で確認する。

https://github.com/danny-yamamoto/my-portfolio-astro/blob/c05a4480433fc8f8b4b36d9732eece6f721f8e44/package.json#L11

```bash
node ➜ /workspaces/my-portfolio-astro (main) $ npm run format

> my-portfolio-astro@0.0.1 format
> prettier --write './**/*.{js,cjs,ts,jsx,tsx,astro,json,html,md}'

.vscode/extensions.json 13ms (unchanged)
.vscode/launch.json 3ms (unchanged)
package-lock.json 87ms (unchanged)
package.json 0ms (unchanged)
postcss.config.js 341ms (unchanged)
prettier.config.js 5ms (unchanged)
README.md 31ms (unchanged)
src/components/Articles.astro 116ms (unchanged)
src/components/Certificates.astro 29ms (unchanged)
src/components/Experience.astro 31ms (unchanged)
src/components/Footer.astro 15ms (unchanged)
src/components/Intro.astro 13ms (unchanged)
src/env.d.ts 10ms (unchanged)
src/layouts/Layout.astro 26ms (unchanged)
src/lib/getArticles.ts 19ms (unchanged)
src/lib/getCertificates.ts 9ms (unchanged)
src/lib/getExperience.ts 10ms (unchanged)
src/pages/index.astro 13ms (unchanged)
tailwind.config.js 4ms (unchanged)
tsconfig.json 1ms (unchanged)
node ➜ /workspaces/my-portfolio-astro (main) $
```

### For example.
- class 内の並び替えが強制される。
```diff
- <section id="articles" class="bg-gray-200 h-screen flex justify-center items-center flex-col">
+ <section
+   id="articles"
+   class="flex h-screen flex-col items-center justify-center bg-gray-200"
+ >
```

## BTW
現職は、もうすぐ最終出社日を迎える。

諸々の引き継ぎを終えて、次に向けて準備を始めた。

役割を引き継ぐ上で、重ねて助言を行なったが、一部伝わっていなかった。

人は、経験を通してからでしか、その人自身の知識にならないことを再認識した。

https://www.amazon.co.jp/dp/448068431X?ref_=cm_sw_r_cp_ud_dp_GSZZR590XJ5KGR29HTDF_1

[^1]: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss