Nodejs - Express 新手教程(03-添加项目tailwindcss支持)

u呼

已于 2024-07-19 18:05:44 修改

阅读量238

点赞数 1

分类专栏： Express 文章标签： express

于 2024-07-19 18:03:27 首次发布

本文链接：https://blog.csdn.net/weixin_45887198/article/details/140556167

版权

Express 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

如果你不想使用 tailwindcss 可以自己编写样式，本章可以跳过
但是要注意引入的资源路径是服务的静态资源地址 public/***

1. 安装 tailwindcss

npm install tailwindcss postcss autoprefixer postcss-cli
# 如果项目创建你使用的 pnpm 要使用下方命令
pnpm add tailwindcss postcss autoprefixer postcss-cli

在这里插入图片描述

2. 配置文件生成

npx tailwindcss init -p

在这里插入图片描述

3. 配置文件修改

修改 tailwind.config.js,配置tailwindcss生效范围

/** @type {import('tailwindcss').Config} */
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/views/*.ejs"],
  theme: {
    extend: {},
  },
  plugins: [
    {
      tailwindcss: {},
      autoprefixer: {},
    },
  ],
};

4. 添加样式生成、压缩

pnpm add cssnano

在这里插入图片描述

5. 添加 tailwindcss 脚本命令

 "tailwind:css": "postcss public/stylesheets/tailwindcss.css -o public/stylesheets/style.css --watch"

在项目根目录命令行执行该命令，注意不要关闭命令窗口，命令行会实时检测用到的 tailwindcss 类，将其抽离到指定的css文件中
在这里插入图片描述

6. 重新修改文章列表

找到 views/index.ejs 写入如下代码

<!DOCTYPE html>
<html>

<head>
  <title>Blog Home</title>
  <link rel="stylesheet" href="stylesheets/style.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body class="bg-gray-100">
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold text-center mb-6">Articles</h1>
    <ul>
      <% articles.forEach(function(article) { %>
      <li class="bg-white rounded-lg shadow overflow-hidden mb-4">
        <div class="p-5">
          <h2 class="text-xl font-semibold text-gray-800">
            <%= article.title %>
          </h2>
          <p class="text-gray-600 mt-2">
            <%= article.content %>
          </p>
          <div class="mt-3">
            <% if (article.articleTags && article.articleTags.length) { %>
            <small class="font-medium">Tags:</small>
            <% article.articleTags.forEach(function(tag, index) { %>
            <span class="inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
              <%= tag.name %><%= index < article.articleTags.length - 1 ? ', ' : '' %>
            </span>
            <% }); %>
            <% } else { %>
            <small>No tags</small>
            <% } %>
          </div>
        </div>
      </li>
      <% }); %>
    </ul>
  </div>
</body>

</html>