AstroとWordpressでJamstack その3 AstroでTailwindを使用する
公開日時:2024-03-22T06:02:16.809Z
Layoutを作っていく前にTailwindの導入です。
プロジェクトディレクトリのルートで
npx astro add tailwind
してやります。
tailwind.config.mjsファイルが作られ、astro.config.mjsに
export default defineConfig({
integrations: [tailwind()]
});
が追記されます。
prettierもインストールしておきましょう
npm install -D prettier prettier-plugin-astro prettier-plugin-tailwindcss
prettier.config.mjsファイルをルートに作成し中身を
export default {
plugins: ['prettier-plugin-tailwindcss'],
}
とします。vscodeの設定で

を選んでやると整形してくれます。(なぜかうまくうごかない。Parser not inferred, trying VS Code language.なのでparserの記述が間違っていると思われる)
ではテストしましょう。前回編集したpages/index.astroを編集します。
<body class="p-5">
<h1 class=" text-lg font-serif font-bold">AstroPress</h1>
bodyとh1にTailwindのclassを設定して反映されればOKです。
AstroPress