Astro: Introduce Tailwind CSS #TypeScript

Tailwind CSS について。

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

Version up

Astro を数ヶ月放置していたので latest にあげる。

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 を有効にする。

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 ¹ を VSCode に install する。
Prettier Plugin を追加する。

npm install -D prettier prettier-plugin-tailwindcss
touch .prettierrc
touch .prettierignore
touch .prettierrc.js

Use Tailwind CSS

commandline で確認する。

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 内の並び替えが強制される。

- <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://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss ↩