TailwindCSS 与gpt-4o结合实现极速搭建页面，实现掘金首页搭建

Find
1,128 阅读4分钟

前言：

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。

Tailwind的理念就是不需要写CSS样式，只需要写HTML文件，只需要做到语义化标签，就能很好的使用Tailwind去自动创建CSS样式，速度对于在style.css文件中自己写样式的快了不止一倍，因为你需要先定义好名称，再根据名称去写样式。而且对于有些CSS样式的编写，设计到嵌套多层结构，就需要不断的...，这也增加了工程量。

但是这种速度还不够，如果用gpt-4o识别图片的功能用上，让gpt-4o直接给我们一个html文件，使用上语义化标签定义好class，是不是就能直接一键生成一个界面出来，那效率就高了不止几倍了。

TailwindCSS的配置：

安装 Tailwind CSS 通过 npm 安装 tailwindcss 及其同级依赖项，并创建你的 tailwind.config.js 文件。

终端

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

image.png

image.png

将 Tailwind 添加到你的 PostCSS 配置中 在你的 postcss.config.js 文件或项目中 PostCSS 被配置的任何地方添加 tailwindcss 和 autoprefixer。

postcss.config.js

module.exports = {
   plugins: {
   tailwindcss: {},
   autoprefixer: {},
  }
}

配置你的模板路径 在你的 tailwind.config.js 文件中添加所有模板文件的路径。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html",
    "./src/**/*.{js,vue,ts,jsx,tsx,html}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

这里content里放的就是你需要扫描的文件：**就是这个目录下所有的文件里的文件（深度去检索） .{}就是后缀是这个文件的 。

在你的 CSS 中添加 Tailwind 指令 在你的主 CSS 文件中为 Tailwind 的每一层添加 @tailwind 指令。

main.css


@tailwind base;
@tailwind components;
@tailwind utilities;

模拟掘金首页

image.png

这是掘金首页，由导航栏nav、两边aside和中间内容构成。我们只需要把图片交给gpt-4o去，让它导出一份有语义化标签的HTML文件，运用上TailWindCSS就能够很快实现掘金首页的模样。

image.png

image.png

这样你直接获得了掘金首页的静态html文件

image.png

这里只是简单的模拟出来这个文件，实际业务中我们可以用上vue-router去跳转页面，连上后台数据库去实时更新数据内容，路由守卫去控制如果没有登录就不能点赞业务逻辑，状态驱动页面在什么状态就展现什么页面 ，搜索框中防抖节流还有猜你喜欢，每一个小页面都可以用一个组件去做（分组件化的思想）。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic HTML with Tailwind CSS</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <!-- <link href="style.css" rel="stylesheet"> -->

    <style></style>
</head>
<body class="font-sans bg-gray-100">
    <header class="bg-white shadow">
        <div class="container mx-auto flex justify-between items-center p-4">
            <div class="logo">
                <img src="logo.png" alt="Logo" class="h-8">
            </div>
            <nav class="flex space-x-4">
                <a href="#" class="text-gray-700 hover:text-blue-500">首页</a>
                <a href="#" class="text-gray-700 hover:text-blue-500">BOT</a>
                <a href="#" class="text-gray-700 hover:text-blue-500">流点</a>
                <a href="#" class="text-gray-700 hover:text-blue-500">课程</a>
                <a href="#" class="text-gray-700 hover:text-blue-500">商城</a>
                <a href="#" class="text-gray-700 hover:text-blue-500">APP</a>
                <a href="#" class="text-gray-700 hover:text-blue-500">插件</a>
                <a href="#" class="text-gray-700 hover:text-blue-500">活动</a>
                <a href="#" class="text-gray-700 hover:text-blue-500">竞赛</a>
            </nav>
            <div class="user-actions flex space-x-2">
                <button class="bg-blue-500 text-white py-2 px-4 rounded">创建者中心</button>
                <button class="bg-blue-500 text-white py-2 px-4 rounded">会员</button>
            </div>
        </div>
    </header>
    <div class="container mx-auto flex mt-4">
        <aside class="w-1/4 p-4 bg-white shadow rounded">
            <nav>
                <ul class="space-y-2">
                    <li><a href="#" class="block text-gray-700 hover:text-blue-500">综合</a></li>
                    <li><a href="#" class="block text-gray-700 hover:text-blue-500">后端</a></li>
                    <li><a href="#" class="block text-gray-700 hover:text-blue-500">前端</a></li>
                    <li><a href="#" class="block text-gray-700 hover:text-blue-500">Android</a></li>
                    <li><a href="#" class="block text-gray-700 hover:text-blue-500">iOS</a></li>
                    <li><a href="#" class="block text-gray-700 hover:text-blue-500">人工智能</a></li>
                    <li><a href="#" class="block text-gray-700 hover:text-blue-500">开发工具</a></li>
                    <li><a href="#" class="block text-gray-700 hover:text-blue-500">代码人生</a></li>
                    <li><a href="#" class="block text-gray-700 hover:text-blue-500">阅读</a></li>
                    <li><a href="#" class="block text-gray-700 hover:text-blue-500">排行榜</a></li>
                </ul>
            </nav>
        </aside>
        <main class="w-3/4 p-4">
            <section class="recommendations space-y-4">
                <article class="bg-white p-4 shadow rounded">
                    <h2 class="text-xl font-bold">从数据仓库到数据湖(下)：热门的数据湖开源框架</h2>
                    <p>在上一篇从数据仓库到数据湖的...<a href="#" class="text-blue-500 hover:underline">更多</a></p>
                    <footer class="text-gray-500 text-sm mt-2">
                        <span>作者: LightGao</span> | <span>阅读: 190</span> | <span>评论: 2</span>
                    </footer>
                </article>
                <article class="bg-white p-4 shadow rounded">
                    <h2 class="text-xl font-bold">240701 - 240705 早聊 AI 资讯 | 苹果加入OpenAI董事会；AI要发展该...</h2>
                    <p>苹果加入OpenAI董事会；AI要发展该...</p>
                    <footer class="text-gray-500 text-sm mt-2">
                        <span>阅读: 345</span>
                    </footer>
                </article>
                <article class="bg-white p-4 shadow rounded">
                    <h2 class="text-xl font-bold">前端部署发布项目后，如何解决缓存的老版本文件问题</h2>
                    <p>针对这个问题有两种方式: 第一...</p>
                    <footer class="text-gray-500 text-sm mt-2">
                        <span>阅读: 2.8k</span> | <span>评论: 38</span> | <span>标签: JavaScript, Vue.js</span>
                    </footer>
                </article>
                <article class="bg-white p-4 shadow rounded">
                    <h2 class="text-xl font-bold">图文讲解CSS之BFC</h2>
                    <p>前言 已解决了浮动Web页面布局的...</p>
                    <footer class="text-gray-500 text-sm mt-2">
                        <span>阅读: 1.1k</span> | <span>评论: 5</span>
                    </footer>
                </article>
                <article class="bg-white p-4 shadow rounded">
                    <h2 class="text-xl font-bold">springAI初体验 让人都能跑出大模型</h2>
                    <p>springAI初体验 让人都能跑出大模型...</p>
                    <footer class="text-gray-500 text-sm mt-2">
                        <span>阅读: 2.2k</span> | <span>评论: 18</span>
                    </footer>
                </article>
                <article class="bg-white p-4 shadow rounded">
                    <h2 class="text-xl font-bold">如何使用 JavaScript 解析 URL?</h2>
                    <p>如何使用 Web 前端开发者的利器...</p>
                    <footer class="text-gray-500 text-sm mt-2">
                        <span>阅读: 901</span>
                    </footer>
                </article>
            </section>
        </main>
        <aside class="w-1/4 p-4 bg-white shadow rounded">
            <section class="sidebar space-y-4">
                <div class="sign-in bg-gray-200 p-4 rounded">
                    <h3 class="text-lg font-bold">签到</h3>
                    <button class="bg-blue-500 text-white py-1 px-3 rounded mt-2">2天</button>
                    <p class="text-gray-600 mt-1">点击社区签到一天</p>
                </div>
                <div class="top-articles bg-gray-200 p-4 rounded">
                    <h3 class="text-lg font-bold">文章榜</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="block text-gray-700 hover:text-blue-500">vueConf 2024：揭秘vue3.5...</a></li>
                        <li><a href="#" class="block text-gray-700 hover:text-blue-500">Rust 在 Android 中的应用</a></li>
                        <li><a href="#" class="block text-gray-700 hover:text-blue-500">豆包Marscode体验官：拿管...</a></li>
                        <li><a href="#" class="block text-gray-700 hover:text-blue-500">Vine：一种全新定义 Vue 函数...</a></li>
                        <li><a href="#" class="block text-gray-700 hover:text-blue-500">大厂都在偷偷用语义化标签...</a></li>
                    </ul>
                    <a href="#" class="text-blue-500 hover:underline">查看更多</a>
                </div>
                <div class="ad">
                    <a href="#"><img src="ad.png" alt="广告" class="w-full rounded"></a>
                </div>
            </section>
        </aside>
    </div>
    <footer class="bg-white shadow p-4 mt-4">
        <p class="text-gray-700 text-center">© 2024 你的公司. 保留所有权利.</p>
    </footer>
</body>
</html>

后记

这份HTML不需要配置tailwind就可以直接运行 是因为它直接使用CDN直接引入了代码<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> 如果感兴趣可以试一下。

如果说以前自己编写样式需要花一天，那现在估计就只需要一小时完成，gpt的能力是很恐怖的，当然前提还是我们自身水平足够，这将让我们编程能力更上一层楼。

avatar
文章
阅读
粉丝