ハウツーサイトと統合されたTailwindを得る方法

GoWind Boilerplate
私は静的サイトジェネレータが大好きです.彼らはすぐにサイトをホイップすることになるとバックエンドの仕事のための素晴らしいツールです.このサイト(現在の)は、上に構築され、それのスタイリングのために風を使用しています.私は自分の視野を拡大し、他の静的サイトジェネレータを見たかった.私が最後に言ったようにpost , 私は学び始めたGo . 私が他のSSGについて学び始めたあと、私は遭遇しましたHugo そして、それらの信じられないほど高速ビルド速度で試してみたい!あなたが気づいていない場合には、私はTailwindが大好き!それで、私は速くWogoを使用しているサイトとTailwindをすでに統合して始める方法を必要としました.私はいくつかの研究を行い、いくつかの良いリソースを発見-ポストの最後に記載された.
リソースの助けを借りて-私は自分のための迅速なボイラ板のレポを(他の誰もが希望)プロジェクトの出発点として使用するスパン.ようこそ、Gowind!あなたは、レポを見つけることができますhere . 以下は、私たちは、最大の開発環境のワークフローを実行して実行する必要がある最小限の手順を通過します!あなたはgowindの作品を知るためにこれらの手順に従うことができます!

始めましょう
まず、NPMを設定し、必要な依存関係をインストールしなければなりません.使えます

npm init -y

すぐに住むpackage.json プロジェクトディレクトリ内のすべてのデフォルト値を使用します.次に、Tailwindの必要な依存関係をインストールする必要があります.Hugoがインストールされていると仮定します.実行に必要な依存関係をインストールするには

npm install --save-dev autoprefixer postcss postcss-cli postcss-import tailwindcss

これはCLUIとインポートサポートを使用してTailwindとPostCSSをインストールします.

設定ファイル
依存関係がインストールされた後、設定ファイルを作成してコードを作成する必要があります.まず、プロジェクトのルートで、ディレクトリ/フォルダを作成しますassets それから別の子ディレクトリcss . 中assets/css 3つの新しいファイルを作ります.

main.css - これは、我々のtailwind指令が行くところです

postcss.config.js - これはPostcssプラグインとしてテールウィンドを含むところです

tailwind.config.js - これは私たちのtailwind設定ファイルです.

メイン.CSS
インサイドmain.css ファイルは、Tarwindを使用するために必要なクラスを生成している間、Tarwindディレクティブを追加します.あなたがこれを行う方法を知らない場合は、これは非常に簡単ですdocs . PostCSSインポートを使用しているので@import の代わりに@tailwind 風の方向ごとに問題を避けるために.ファイルは次のようになります.

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

CSS設定
あなたのpostcss.config.js ファイルはPostCoopのインポートとautoprefixerと同様にプラグインとしてテールウィンドを含むようにPostcssに指示するつもりです.そのために次のコードを追加しますpostcss.config.js ファイル

module.exports = {
    plugins: [
        require('postcss-import')({
            path: ["assets/css"]
        }),
        require('tailwindcss')('assets/css/tailwind.config.js'),
        require('autoprefixer')
    ]
}

PostCSSインポートおよびTailWindCSSのパス引数に注意してください.あなたが好むならばpostcss.config.js and tailwind.config.js 別の場所のファイルは、ちょうどそれに一致するパスを調整します.

設定風設定
自動的にtailwind.config.js コマンドを実行します.

npx tailwindcss init

これにより、すべてのテール風のデフォルトでルートプロジェクトディレクトリにテール風の設定ファイルが作成されます.重要なのは、このファイルをあなたのpostcss.config.js 風車のファイル!

我々のHTMLにTrewindを加えてください
最後に、我々のHTMLヘッド領域にテール風を加えなければなりません.私がヒューゴとSSGSについて愛している1つのものは、一般に、コードをセクションに分ける力です、そして、ヒューゴの部分は私のためにこれで大きな仕事をします.Hugoはテンプレート言語を使用します.だから、まず宣言する必要があります$styles 変数

{{ $styles := resources.Get "css/main.css" | postCSS (dict "config" "./assets/css/postcss.config.js") }}

ここでは、スタイルvarを宣言し、リソースを取得するためにhugo機能を使用します.CSSファイルへのパスがassets ディレクトリ.CSSファイルをつかんだ後、Postcssにパイプします.また、dict引数がHugoにpostcss設定ファイルの位置を伝えていることに注意してください.
コードの最後の部分はHTMLに追加する必要がありますhead 我々が生産にあるかどうかによって異なる何かをするのを助けます.我々が生産中であるならば、我々はCSSを制限して、未使用のクラスをパージして、ファイルサイズを減らしたいです.しかし、我々が開発環境にいるならば、我々はこれについても気にかける必要もありません.そのために次のコードを追加します.

  {{ if .Site.IsServer }}

  {{ else }}
  {{ $styles := $styles | minify | fingerprint | resources.PostProcess }}

  {{ end }}

The if .Site.IsServer タグは、我々が開発中かどうか決定します.hugoの組み込みサーバを使用している場合はtrueですhugo server . 開発中であれば、CSSを使用します.しかし、我々がサーバーを使用していないならば、我々は生産しています、そして、hugoパイプは未使用のCSSをminifyして、パージします.
そして、それ!我々はアップして実行する必要がありますし、Tailwindのユーティリティクラスを使用することができます!あなたのヒューゴサーバーを実行し、すべての正常に動作していることを確認するためにTailwindでいくつかのHTMLを追加します.
これを行う私の研究では、私は偉大なYouTubeのビデオに遭遇し、それは私がそのプロセスを理解するのを助けたことを見た.私はそれをわずかに修正し、ビデオのようなsassを使用しませんでした.私は物事をシンプルに保つために必要なだけ純粋なCSSを使用するように.
閉じるこの動画はお気に入りから削除されています.