2

ご存じのとおり、Tailwind は非常に人気のある PostCSS ソリューションです。バージョン 11.2.0 またはそれ以前のバージョンを実行している Angular アプリに TailwindCSS を追加したいと考えています。どうすればそうできますか？

これは最近Angularコミュニティで見た非常に人気のある質問であるため、私は自分の質問を投稿して回答することにしました

4

1 に答える 1

6

Angular 11.2.0 で TailwindCSS をセットアップする

  1. でインストールnpm install -D tailwindcss

  2. TailwindCSS プラグインをインストールします (オプション):

  • npm i @tailwindcss/typography

  • npm i @tailwindcss/forms

  1. ワークスペースまたはプロジェクト ルートに TailwindCSS 構成ファイルを作成します。その構成ファイルに名前を付けるtailwind.config.js

次のようになります。

module.exports = {
    prefix: '',
    purge: {
      content: [
        './src/**/*.{html,ts}',
      ]
    },
    darkMode: 'class', // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [require('@tailwindcss/forms'),require('@tailwindcss/typography')],
};
  1. styles.scss ファイルに、次の TailwindCSS インポートを追加します。
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

SCSS ではなく CSS を使用している場合、ファイルは次のようになります。

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

Angular で TailwindCSS が機能していることを確認する

コンポーネントのいずれかに移動して、次のように記述します。

<button
  class="py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-400">Hello</button>

実行するng serveと、次のボタンが表示されます

角度のある追い風CSS

本番環境で TailwindCSS をパージする方法

パージしないと、TailwindCSS が追加するすべての CSS クラスのために、CSS が非常に重くなる可能性があります。パージすると、未使用のクラスがすべて削除されます。

Angular 11.2.0 でパージを行う方法は次のとおりです。

A) これは私の好みの方法です。これをビルド SCRIPT に追加するNODE_ENV=production ng build --prod と、tailwind.config.js ファイルは次のようになります。

purge: {
      enabled: process.env.NODE_ENV === 'production',
      content: [
        './src/**/*.{html,ts}',
      ]
    },

B)プロパティ内のプロパティを に設定tailwind.config.js fileできます。これにより、パージが常に実行されます。そのことに注意してください。enabledpurgetrue

....
prefix: '',
    purge: {
      enabled: true,
      content: [
        './src/**/*.{html,ts}',
      ]
    },
....

その後、実行するng build --prodと、バンドルが小さくなってから表示されます。

パージ前

tailwindcss パージ

パージ後

追い風を一掃する

TailwindCSS を使用した Angular (11.2.0 以前のバージョン) の詳細については、私の記事をご覧ください。

https://dev.to/angular/setup-tailwindcss-in-angular-the-easy-way-1i5l

于 2021-02-17T08:08:48.483 に答える