带有尾风的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中文网其他相关文章！