AstroでTailwind CSSを使用する方法をメモ。
Astroのバージョンは5.2.3を使用しています。
インストール方法
下記コマンドを実行します。
npx astro add tailwind
いくつか確認される項目はすべてyesを選択します。
インストール完了後、src/styles/global.css が追加されました。
中身は以下の通りで、Tailwindのインポートが行われています。
@import "tailwindcss";
src/layouts/Layout.astro を開いて、上記ファイルをインポートする記述を追加します。
--- import "../styles/global.css"; --- <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width" /> <title>test</title> </head> <body> <slot /> </body> </html>
これで使用できるようになりました。
src/pages/index.astro で使用してみます。
--- import Layout from '../layouts/Layout.astro'; --- <Layout> <p class="text-red-400 text-6xl">Tailwindのテスト</p> </Layout>
コメントが承認されるまで時間がかかります。