5簡単な手順でTailWindCSSのオフラインドキュメント

この投稿は、オフラインドキュメントシリーズの2番目の1つです.あなたがここに新しいならば、私の最初のポストをチェックしてください.
このポストでは、TailWindCSS、私のお気に入りのユーティリティの最初のCSSフレームワークのためのオフラインドキュメントを構築し、デザインを急速にプロトタイピングするために私の移動CSSのフレームワークを作りましょう.

ソースコードの取得
TruwindCSSのドキュメントはtailwindcss.com ウェブサイト.我々は簡単にGoogleの検索を介してGithubにこのウェブサイトのソースコードを見つけることができます.それは、Gitthubでホストされますhttps://github.com/tailwindlabs/tailwindcss.com .
最初にソースコードをダウンロードして調べましょう.

git clone https://github.com/tailwindlabs/tailwindcss.com
cd tailwindcss.com

選択したコードエディターを開きます.vscodeを使うなら、

code .

技術スタックの理解
ルートディレクトリのファイルを見ると、

next.config.js - ウェブサイトは

tailwind.config.js - ウェブサイトはTooWindCSSをCSSフレームワークとして使っています

yarn.lock - パッケージマネージャとしての糸の使用

nextjsの展開プロセスを理解するために、我々は単にその対応するドキュメンテーションウェブサイトに行くことができます.以下のリンクの情報を見つけることができます.

Deployment | Next.js

Advanced features: Static HTML Export | Next.js

パッケージ.JSON
展開がどのように動作するかに関する十分な情報が得られるならば、開いてみましょうpackage.json ファイルを参照してください.幸運にも、我々は静的ファイルを生成するためのスクリプトをエクスポートしている.私たちの生活はすでに簡単になっている.


コマンド
ドキュメントを生成するには十分な情報があります.

すべての依存関係をインストールするyarn パッケージマネージャー.

yarn install

ビルドスクリプトを実行する

yarn export

これは、必要な静的なHTML、JS、CSSとアウトフォルダーのすべての資産を生成します.

フォルダに生成されたドキュメントをサーブする

cd out
python -m http.server // simpler
// Or if you prefer nodejs
yarn global add serve
serve

おめでとう!我々は現在、TailWindCSSのドキュメントをオフラインでご利用いただけます.
あなたが必要とするどんなフレームワーク/図書館のためにもオフラインドキュメンテーションをしたいならば、コメントで我々に話してください.

vscodeユーザーのためのプロのヒント

JSconfig .JSON
あなたが以下のディレクトリ構造を持っているならば

Home
\- components
   |- A.js
   |- B.js

utils
\- utils.js

インポートしたいutils.js インA.js , 次のように相対パスを使用する必要があります

import utils from "../../utils/utils.js"

これは、ファイルのインポートに従うことは困難になりますし、一度フォルダの構造3以上のレベルを深くして、これはさらに困難なすべてのフォルダを念頭に置いて必要なインポートを記述することができます.
JSconfig .JSONに救出!
「CompilerOptions」>「Path」辞書を使用して、プロジェクトのルートに対するパスマップを定義できます.

{
    "compilerOptions": {
        "paths": {
            "@/utils/*": ["utils/*"],
            "@/home/*": ["Home/components/*"]
         },
    }
}

Utilsをインポートするすべての相対パスの代わりに、単に使用することができます

import utils from "@/utils/utils.js"

インポートをインポートするにはA.js 他のファイルでは、

import A from "@/home/A.js"

これがわかりますjsconfig.json ファイルをtailwindcss.com プロジェクトソースコードを検査し、楽しいことを学ぶ新しいもの.
ハッピーコーディング!