Tailwind CSSとAlpine.jsを備えた110のスターター

この記事では、Eleventy、Tailwind CSS、およびAlpine.jsを使用して個人のWebサイトを構築するための合理化されたアプローチについて詳しく説明し、シンプルさと最小限のデザインを強調しています。既存の潜在的に複雑なスターターを使用する代わりに、このガイドは、簡単なセットアップを説明します。

前提条件： Tailwind CSS、HTML、JavaScript、Nunjucksテンプレートエンジン、コマンドライン、およびNPMに精通しています。

ステップ1：プロジェクトのセットアップ

新しいプロジェクトディレクトリを作成し、端末でナビゲートし、 package.jsonファイルを初期化します。

 npm init -y

EleventyとTailwind CSSをインストールします。

 npm install -d @11ty/leebenty tailwindcss @rest

ステップ2：テストページの作成

index.njk （ホームページ）と_includes/default.njk （ベーステンプレート）を作成します。 index.njk default.njkを拡張します：

 
{％拡張 "_includes/default.njk"％}

{％block title％}動作する{％endblock％}

{％ブロックコンテンツ％}
  <div>
    <div>
      良いデザイン<br><br>
      は<br><br>
      ほとんどデザインとして<br><br>
      可能な限り
    </div>
  </div>
{％endblock％}

 



  <title>{％block title％}動作しますか？{％endblock％}</title>
  <meta charset="UTF-8">
  {％説明％の場合}
    <meta content="{{説明}}" name="description">
  {％endif％}
  <meta content="ie=edge" http-equiv="x-ua-compatible">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" name="viewport">
  <link href="/style.css?v=%7B%%20version%20%%7D" rel="stylesheet">
  {％block head％} {％endblock％}


  {％ブロックコンテンツ％}
    {{content |安全 }}
  {％endblock％}

ステップ3：Tailwind CSS構成

styles/tailwind.config.jsとstyles/tailwind.cssを作成する：

 // styles/tailwind.config.js
module.exports = {
  コンテンツ：['_site/**/*。html']、
  SafeList：[]、
  テーマ： {
    伸ばす： {
      色：{
        変更：「透明」、
      }、
    }、
  }、
  プラグイン：[]、
}

 // styles/tailwind.css
@tailwindベース;
@tailwindコンポーネント;
@tailwindユーティリティ;

@layerutilities {
  。変化 {
    色：透明;
  }
}

ステップ4：プロジェクトの構成とビルド

.gitignoreを作成して、不要なファイルを除外します。

 <code>_site/ .DS_Store node_modules/</code>

.eleventy.jsを作成して、eleventyを構成します。

 const htmlmin = require（ 'html-minifier'）;
const now = string（date.now（））;

module.exports = function（eleventyconfig）{
  Eleventyconfig.addwatchtarget（ './ styles/tailwind.config.js'）;
  Eleventyconfig.addwatchtarget（ './ styles/tailwind.css'）;
  Eleventyconfig.addpassthroughcopy（{'./_tmp/style.css'： './style.css'}）;
  Eleventyconfig.addshortcode（ 'version'、function（）{return now;}）;

  Eleventyconfig.addtransform（ 'htmlmin'、function（content、outputpath）{
    if（process.env.eleventy_production && outputpath && outputpath.endswith（'。html '））{
      return htmlmin.minify（content、{useshortdoctype：true、removecomments：true、collapsewhitespace：true}）;
    }
    コンテンツを返す;
  }）;
};

ビルドスクリプトを使用してpackage.jsonを更新してください：

 {
  「スクリプト」：{
    "start"： "eleventy  -  serve＆npx tailwindcss -i styles/tailwind.css -c styles/tailwind.config.js -o _site/style.css -watch"、
    "build"： "eleventy_production = true leventy && node_env = production npx tailwindcss -i styles/tailwind.css -c styles/tailwind.config.js -o _site.css  -  minify"
  }、
  「devdependicies」：{
    「@11ty/Eleventy」：「^1.0.0」、
    「Tailwindcss」：「^3.0.0」、
    「html-minifier」：「^4.0.0」
  }
}

npm install実行してから、 npm start 。 tailwind.config.jsとtailwind.cssを変更して、Tailwindの反応性をテストします。制作ビルド用にnpm run build実行します。

ステップ5：Alpine.jsの統合

Alpine.jsをインストールしてください：

 npmインストール-d alpinejs

Alpine.jsをコピーするためのupdate .eleventy.js ：

 // ...（前の.eleventy.jsコンテンツ）...
Eleventyconfig.addpassthroughcopy（{'./node_modules/alpinejs/dist/cdn.js'： './js/alpine.js}）;
// ...（残りの.eleventy.jsコンテンツ）...

閉鎖前に_includes/default.njkにalpine.jsを追加します

以上がTailwind CSSとAlpine.jsを備えた110のスターターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。