AstroとWordpressでJamstack　その３　AstroでTailwindを使用する

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です。