VUEプロジェクトにおけるテールウインドの設定

私は、風変わりなCSSが導入を必要としないと思います.このユーティリティの最初の、完全に応答CSSのフレームワークは、(CSSの調査の状態は、2020年のCSSフレームワークの成長の最大の成長を経験したことを示唆)ますます普及しており、私は私の仕事のブートストラップVueを使用していたので、私はそれが別の何かを試す時を考えた.あなたもそれを試してみたいとVueプロジェクトを起動したい場合は、これらの指示に従ってください.
プロジェクトでTarwindをセットアップするための指示は、Tailwind docsで見つかります.
既にVUEプロジェクトが準備されていて、Tailwindを使用する準備ができているならば、あなたは手順1 - 2をスキップすることができます!

Vue CLI

コマンドラインからVueプロジェクトを簡単に設定するには、コンピュータにインストールされているVue-cli(コマンドラインインターフェイス)ツールが必要です.コマンドラインからこれを行うことができます.

npm install -g @vue/cli

( G - Gはグローバルにパッケージを追加するので、コンピュータ上のすべてのプロジェクトで使用することができます)

2 . Vueプロジェクトを作成する

Vue CLIをインストールすると、コマンドラインからVueプロジェクトを作成することができます.お使いのコンピュータのフォルダに移動し、プロジェクトを作成し、次のように入力します.

vue create tailwind-project

私は私のプロジェクト『Tailwind Project』を呼ぶことを選びました、しかし、もちろん、あなたはあなたが望むものは何でも呼ぶことができます.プロジェクトがVue 2または3を使用するかどうかを選択する必要があります.プロジェクトが作成されたら、コマンドラインで次の2つのコマンドを入力します.

cd tailwind-project
npm run serve

最初のコマンドでプロジェクトフォルダに移動します(プロジェクトを別の名前にする場合は、「Tarwindプロジェクト」という名前をプロジェクトの名前に置き換える必要があります).番目のコマンドは開発サーバーを起動し、新しく作成されたプロジェクトを表示できます.
この2番目のコマンドを実行すると、localhost URLが与えられ、ブラウザにコピーでき、Vueプロジェクトテンプレートが表示されます.

Tarwindの設定

コマンドラインに戻って、プロジェクトフォルダ内にあることを確認し、次のコマンドを実行します.

npm install tailwindcss

Tailwindをインストールすると、選択したコードエディターを開きます.postcssという新しいプロジェクトのルートディレクトリにファイルを作成する必要があります.設定.jsと以下のファイルを追加します.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

PostCSSはToowindが動作するように必要なツールです.
また、Tailwindというファイルを作成する必要があります.プロジェクト内のsrc/資産フォルダーのCSS.次のファイルに追加します.

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

基本的にこれはCSSファイルであり、これらのディレクティブはTailwind付属のCSSクラスへのアクセスを許可します.
最後に、メインで.JSファイルは、あなたの新しいtailwindをインポートする必要があります.CSSファイル( vueとappのインポート文の後の行)

import Vue from 'vue';
import App from './App.vue';
import '@/assets/css/tailwind.css';

ここをクリック Postcss gotcha

このプロセスを完了している間、以下のエラーを打った.

Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.

このエラーをヒットしない場合は、この手順を省略できます.

5 .テストしてください！

すべてのよく、あなたは今、アプリケーションにTailwindクラスを適用することができますし、スタイリングをそれに応じて調整を参照してくださいする必要があります.アプリで.Vueファイルは、自動的にVueの標準テンプレートに含まれているすべての標準的なスタイルを削除します.
これを行うと、ブラウザでサイトを表示する場合は、レイアウトやスタイリングの変更に注意してください.コードエディターで「HelloWorld」に移動します.vue、自動的に含まれるコンポーネント.テンプレートコンテンツの大部分が含まれます.あなたはアプリから渡される小道具をレンダリング<h1>タグを見つけることができるはずです.Vue(それはあなたのvuj . jsアプリへの歓迎を読む主要な見出しです).
クラス' text - red - 500 'を追加します.

<h1 class="text-red-500">{{ msg }}</h1>

すべてが働いているならば、あなたのテキストは現在赤でなければなりません.おめでとう、あなたは首尾よくVueプロジェクトを正常にセットアップしました!