プラグインを使用せずにGridsomeでTailWinCSSを開始

Tailwindcss 強力な考え方でWebアプリケーションを開発するための新しいCSSフレームワークです.他のフレームワーク(bootstrap、bulmaなど)はいくつかのUIを作るためにBoilerPlateを使用することに焦点を当てていますが、Tailwindは急速にカスタムデザインを構築するためのユーティリティの最初のCSSフレームワークに焦点を当てています.
それは私たちが他のCSSフレームワークからUI Boilerplateと戦う必要がないことを意味しますmt-4 マージントップ.shadow-xl ボックスシャドウ用bg-red-500 赤い背景.も、非常に強力な各クラスのいくつかの画面サイズの応答ブレークポイントを定義します.
反対側でGridsome Vueに基づく静的サイトジェネレータです.jsJamstackの出現以来、静的サイトジェネレータは、我々が開発して、着陸ページまたはドキュメンテーションサイトのために特にウェブサイトを届ける方法の上の立ち上がりスターです.
このポストでは、Gridsomeを使用してTailWindCSSを使用しようとします.プラグインを使用する代わりに、ファイルサイズを他の依存性を減らすために手動でtarwindを設定します.しかし、あなたがプラグインを使いたいならば、あなたはこのポストをスキップして、ここに行くことができますgridsome-plugin-tailwindcss ).

1 . Gridsome CLIのインストール

糸の使用yarn global add @gridsome/cli

NPMを使うnpm install --global @gridsome/cli

2 .新規Gridsomeプロジェクトの作成

あなたのマシンにインストールされたgridsome CLIの後、Boilerplateを生成して、あなたのウェブサイトを開発し始めるために、プロジェクトをつくってください.

gridsome create my-gridsome-site

cd my-gridsome-site

TailWinCSSをインストールする

npm i tailwindcss

4 . Tailwind設定ファイルを追加する

Tailwindの設定ファイルの詳細についてはdocs here

npx tailwind init

または新しいファイルを追加するtailwind.config.js rootフォルダに

// tailwind.config.js
module.exports = {
  theme: {},
  variants: {},
  plugins: []
}

GridsomeへのTruwindのインポート

フォルダの作成assets/css と新しいファイルを追加するglobal.css

/* /src/assets/css/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

インポートglobal.css あなたのmain.js ファイル.

// main.js
import "./assets/css/global.css";

Gridsome設定ファイルに

// gridsome.config.js

const tailwindcss = require("tailwindcss")

module.exports = {
  siteName: 'Gridsome',
  plugins: [],
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          tailwindcss
        ],
      },
    },
  }
}

完了すると、TarwindCSSはすでにGridsomeプロジェクトに設定されます.いくつかのサンプルコードを追加しようとします.
インデックスファイルに以下のコードを追加しますsrc/pages/Index.vue

<div class="bg-indigo-900 text-center py-4 lg:px-4 mt-10">
  <div class="p-2 bg-indigo-800 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex" role="alert">
    <span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">New</span>
    <span class="font-semibold mr-2 text-left flex-auto">Get the coolest t-shirts from our brand new store</span>
    <svg class="fill-current opacity-75 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"/></svg>
  </div>
</div>

<div class="bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-4 py-3 mt-10" role="alert">
  <p class="font-bold">Informational message</p>
  <p class="text-sm">Some additional text to explain said message.</p>
</div>

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-10">
  Button
</button>

<button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow ml-3">
  Button
</button>

コマンドで開発サーバを起動しますgridsome develop

移動するhttp://localhost:8080 ブラウザで結果を見る

あなたがビルドを実行する必要がありますgridsome build ファイルをdist あなたのウェブサーバ、アマゾンS 3またはGoogle雲保管へのフォルダ.

これは私の最初の投稿です.いくつかの間違いがある場合は私に知らせてください.ありがとう.
Source Code