Vue.jsでTailwindを使用する

この記事では、Vue CLI3プロジェクトで使用するためにTailwindを設定する方法について説明します。

追い風かなりクールなCSSフレームワークです。

この投稿では、VueアプリでTailwind(v1.0.5)を使用する方法を紹介します。

それは4つの簡単なステップです:

In this post I assume the project you want to use Tailwind on is based on Vue CLI 3.

Tailwindをインストールする

最初のステップは、npmまたはyarnを使用してTailwindをインストールすることです。

# Using npm
npm install tailwindcss --save-dev

# Using Yarn yarn add tailwindcss --dev

構成ファイルを作成する

次に、提供されているTailwindコマンドを使用して構成ファイルを作成します。

./node_modules/.bin/tailwind init tailwind.js

これにより、tailwind.jsプロジェクトのルートにあるファイルに、基本的なTailwind構成を追加します。ファイルは非常に長いので、ここには貼り付けませんが、後で非常に役立つプリセットがたくさん含まれています。

PostCSSを構成する

今、あなたは微調整する必要がありますPostCSSTailwindが実行されることを確認するための構成。追加:

module.exports = {
  "plugins": [
    require('tailwindcss')('tailwind.js'),
    require('autoprefixer')(),
  ]
}

あなたにpostcss.config.js。存在しない場合は作成してください。

注:構成を保存するようにVueCLIを設定した場合package.json、PostCSS構成がそのファイルにないことを確認してください。デフォルトでは、VueCLIは次の行を追加します。

  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },

それらを削除します、 またはpostcss.config.jsファイルは読み込まれません。

CSSファイルを作成する

次に、でCSSファイルを作成しますsrc/assets/css/tailwind.cssと追加

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

Vueアプリにファイルをインポートします

main.jsに追い風をインポートします。

import '@/assets/css/tailwind.css'

((@vueポイントでsrc/

それでおしまい!ここでVueCLIプロジェクトを再起動すると、すべて正常に機能するはずです。

それをテストすることはうまくいく

Tailwind固有のクラスを追加しない限り、何も気付かないでしょう。

たとえば、次のHTMLをテンプレートの1つに追加してみてください。

<div class="bg-purple text-white sm:bg-green md:bg-blue md:text-yellow lg:bg-red xl:bg-orange ...">
  Test
</div>

色付きのボックスが作成されます。

私の無料ダウンロードVueハンドブック


その他のvueチュートリアル: