アストロでTrewind CSSを使う方法

正直に言うと、フレームワークでTruwind CSSを含めるのは簡単ではありませんでした.
なぜ?アストロ・ハブbuild in support for Tailwind ! 🥳
そして、はいTailwind JIT compiler .
アストロプロジェクトでTailwind CSSを設定するためにこのクイックガイドを書きます.

AstroプロジェクトでのTailwind CSSのインストール

基本的なアストロプロジェクトから始めましょう.

mkdir astro-tailwind && cd astro-tailwind
npm init astro

任意のテンプレートを選択することができます.それは実際には重要ではない.
さあ、そよ風CSSをインストールしましょう.

npm install -D tailwindcss

次のステップはAを作成することですtailwind.config.js どのファイルをパージしてJITコンパイラを有効にするかを示すファイル.

module.exports = {
  mode: 'jit',
  purge: ['./public/**/*.html', './src/**/*.{astro,js,jsx,ts,tsx,vue}'],
};

それから、我々はそれを修正することによって、このtailwindastro.config.js ファイルを追加しますdevOptions セクション.

devOptions: {
  tailwindConfig: './tailwind.config.js';
}

今すぐ編集global.css ファイル名public/style ディレクトリ.

@tailwind base;
@tailwind components;
@tailwind utilities;

修正しましょうsrc/pages/index.astro どのように動作するかをテストします.

<div class="bg-gradient-to-br from-indigo-900 to-green-900 min-h-screen overflow-auto">
  <div class="container max-w-5xl mx-auto px-4">
    <div class="w-4/5 mx-auto">
      <h1 class="mt-32 text-white text-6xl font-bold">
        <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo" /> Welcome to
        <a href="https://astro.build/">Astro</a>
      </h1>
    </div>
    <div class="w-4/5 my-10 mx-auto">
      <h3 class="text-gray-300">
        Build faster websites with less
        <strong class="text-white">client-side Javascript</strong>
        <br />
        This is how easy it is to get started
      </h3>
    </div>
    <div class="w-2/5 mx-auto bg-black text-white p-10 leading-10 rounded-2xl shadow-lg">
      mkdir astro<br />
      cd astro<br />
      npm init astro
    </div>
  </div>
</div>

その結果、次のようになります.

また、このプロジェクトをダウンロードすることができますGitHub .

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or