帶有尾風CSS和Alpine.js的高度入門劑

本文詳細介紹了一種簡化的方法，可以使用高度，尾風CSS和Alpine.js構建個人網站，強調簡單性和最小設計。本指南不使用現有的，潛在的複雜起動器，而是會引導您進行簡單的設置。

先決條件：熟悉tailwind CSS，HTML，JavaScript，Nunjucks模板引擎，命令行和NPM。

步驟1：項目設置

創建一個新的項目目錄，在您的終端中導航到它，然後初始化一個package.json文件：

 npm init -y

安裝高度和尾風CSS：

 npm安裝-D @11TY/高度tailwindcss @最新

步驟2：創建一個測試頁面

創建index.njk （主頁）和_includes/default.njk （基本模板）。 index.njk將擴展default.njk ：

 
{％擴展“ _includes/default.njk”％}

{％塊標題％}它起作用{％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：尾風CSS配置

創建styles/tailwind.config.js和styles/tailwind.css ：

 // styles/tailwind.config.js
Module.exports = {
  內容：['_site/**/*。 html']，
  Safelist：[]，
  主題： {
    延長： {
      顏色： {
        更改：“透明”，
      }，，
    }，，
  }，，
  插件：[]，
}

 //樣式/tailwind.css
@tailwind base;
@TailWind組件；
@TailWind實用程序；

@layer實用程序{
  。改變 {
    顏色：透明；
  }
}

步驟4：項目配置和構建

創建.gitignore以排除不必要的文件：

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

創建.eleventy.js配置高度：

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

模塊。 Exports= function（leventyConfig）{
  everconfig.addwatchtarget（'./ styles/tailwind.config.js'）;
  everconfig.addwatchtarget（'./ styles/tailwind.css'）;
  everconfig.addpassthroughcopy（{'./_tmp/style.css'：'./style.css'}）;
  everconfig.addshortCode（'version'，function（）{return now;}）;

  enventyconfig.addtransform（'htmlmin'，函數（內容，輸出路徑）{
    if（process.env.eleventy_production && outputpath && outputpath.endswith（'。html'））{
      返回htmlmin.minify（content，{useshortDoctype：true，removeComments：true，collapsewhitespace：true}）;
    }
    返回內容；
  }）;
};

更新package.json帶有構建腳本的json：

 {
  “腳本”：{
    “ start”：“高度 -  serve＆npx parwindcss -i樣式/tailwind.css -c樣式/tailwind.config.js -o _site/style.css -watch”，
    “ build”：“ everty_production = true升高&& node_env =生產npx tailwindcss -i styles/tailwind.css -c styles/tailwind.config.js -o _site/style.css -site.css -siete.css -minify -minify”
  }，，
  “ devDectiencies”：{
    “@11ty/升高”：“^1.0.0”，
    “ parwindcss”：“^3.0.0”，
    “ html-minifier”：“^4.0.0”
  }
}

運行npm install ，然後npm start啟動開發服務器。通過修改tailwind.config.js和tailwind.css來測試尾風的反應性。運行npm run build以製造生產。

步驟5：集成Alpine.js

安裝Alpine.js：

 NPM安裝-D alpinejs

更新.eleventy.js複製alpine.js：

 // ...（以前的.eleventy.js內容）...
everconfig.addpassthroughcopy（{'./node_modules/alpinejs/dist/cdn.js'：'./js/alpine.js'}）;
// ...（其餘.eleventy.js內容）...

在關閉之前，將alpine.js添加到_includes/default.njk

以上是帶有尾風CSS和Alpine.js的高度入門劑的詳細內容。更多資訊請關注PHP中文網其他相關文章！