私の最初のインターンシップの前に、私はToodWindCSSを使用する必要があるプロジェクトに統合されていましたが、私は最後にそれを愛する使用していた、私がしたすべてはちょうどすべてがすべてに見えたことを確認するためにクラスの束を書いていた、私がしなかった1つのことはTarwindCSSを設定することであり、それは適切に動作する必要がある依存性、そしてそれは私がこの記事で説明するつもりです.

簡単で簡単な方法Tailwindを使用する：

TailWindCSSで行くのが最も簡単で速い方法はCDNを使うことです.

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

しかし、CDNを使用することによってTailWindCSS大きな特徴で行方不明になります、あなたはそれをカスタマイズすることができません習慣@apply and @variantes など、プラグインを使用することはできません.
これらのすべての偉大な機能を活用するためには、ビルドのプロセスにTooTwindを組み込む必要があります.

NWPM経由でWebPackでTailWindCSSをインストールします

NPMを使用するには、ノードとNPMをお使いのマシンにインストールされている必要があります.
まず必要なのはパッケージを作ることです.そのオープンターミナルとタイプをするJSONファイルnpm init -y このコマンドはパッケージを作成します.あなたの端末のJSONファイルは、TailWindCSSに必要なパッケージをインストールするためにこれらのコマンドを入力します

$ npm install webpack webpack-cli postcss postcss-loader css-loader tailwindcss mini-css-extract-plugin

あなたがプロジェクトファイルを見たならば、あなたはそれの上にファイルの束とNodeRainモジュール名でフォルダに気がつきます
すべてのものを設定するには、WebPackでファイルを作成する必要があります.設定.JSとそのファイルで次のように書きます.
最初に、我々は我々が書く経路を必要とするつもりですconst path=require('path')path is nodeモジュールはファイルやディレクトリパスを操作するユーティリティを提供する
我々が必要とする第2mini-css-extract-plugin これは以前にインストールされたプラグインです.このプラグインは、独立したCSSファイルを出力するのに役立ちます.
それで、我々のwebpachのために.設定.JSはこのようになります

const path=require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

その後、次の書き込み

module.exports={

モードを開発に設定する

mode:"development",

でエントリポイントファイルを作成する必要があります.エントリポイントはWebpackが出力ファイルの構築を開始するように見える場所ですmain.js rootディレクトリに設定します
WebPackの設定ファイルにエントリポイントを追加しましょう

entry: "./main.js",

今CSSファイルを作成します.CSSとこれらのTruwindディレクティブを

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

今すぐメインに移動します.あなたのCSSファイルをインポートimport "styles.css"Webpackの設定に再度
を追加し、

output:{
        filename:"main.js",
        path: path.resolve(__dirname,"./build")
    },
    plugins: [new MiniCssExtractPlugin({
        filename:"styles.css",
    })],

出力オブジェクトは、JavaScriptとCSSファイルを生成します私たちのためにそれはTailWindCSSをあなたとJavaScriptファイルのためのRegulare CSSに変換されます、また、それはあなたのHTML
プラグインのオプションを使用します.mini-css-extract-plugin CSSファイルを出力するために
我々がセットする必要がある最後のものは、あなたが以下を書く必要があるという我々のCSSのための規則です

module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                MiniCssExtractPlugin.loader,
                "css-loader",
                "postcss-loader"
            ]
            }
        ]
    }

これはWebpackにどのようにファイルを処理するかを教えます.Coopの拡張子は、それが使用されるPOSSSによって開始されますMiniCssExtractPlugin.loader CSSを外部のCSSファイルに置きます.
これはあなたのウェブパックです.設定.ジェイルック

OKこれはあなたのWebPackの設定に必要なすべてです.JSONとビルドスクリプトを追加します.次の追加

"scripts": {
    "build": "webpack --config webpack.config.js"
  },

あなたのパッケージ.設定.JSONファイルはこのように

今オープンターミナルと実行npm run build
今、このバンドルすべてのファイルとウィッチのビルドフォルダーを生成する2つのファイルを見つけるJavaScript

output:{
        filename:"main.js",
        path: path.resolve(__dirname,"./build")
    },
    plugins: [new MiniCssExtractPlugin({
        filename:"styles.css",
    })],

生成されたCSSファイルをHTMLファイルに含めません
どのようにCSSファイルにどのようにリンクタグを介して、いくつかのテイウインドクラスをあまりにも、その作業をテストし、ブラウザで開きます.CSSが適用されていないことに気づくでしょう.なぜなら、私たちはまだPostcssが最後に必要としているからです.設定.jsファイル
そして、あなたのPostcss Configファイルがこのように見えるプラグインとしてTailWindCSSを加えてください

今すぐ実行npm run build 再び、Tarwindは働いていて、あなたは
次に、Webpack NPMとPostcssについての詳細を読むことをお勧めします.
このチュートリアルでは、次のいずれかに役立つことを願っています.