🎨
Astro: Introduce Tailwind CSS
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[1] を 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
現職は、もうすぐ最終出社日を迎える。
諸々の引き継ぎを終えて、次に向けて準備を始めた。
役割を引き継ぐ上で、重ねて助言を行なったが、一部伝わっていなかった。
人は、経験を通してからでしか、その人自身の知識にならないことを再認識した。
Discussion