AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站

AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站

1、工具

• 开发软件: vscode
• 技术栈：vue3 + ts + vite + tailwindcss
• AI插件：CodeGeeX: AI Coding Assistant，vscode 直接搜就能搜到，主要是免费，当然如果你有更好的AI工具就不需要这个了，个人体验相对不错的（免费AI）。
• 部署网站：github，使用 github 提供的免费域名进行部署。
• 代码高亮插件：highlight.js

2、安装 TailwindCSS

怎么创建vite 项目就不写了，搜一下命令，点点点就好了。TailwindCSS 站内有很多大佬的详细教程，一搜一大把，最后会附上AI写好的教程地址，感兴趣的可以看一下。

2.1 安装依赖

npm install tailwindcss @tailwindcss/vite

2.2 配置 Vite 插件 (vite.config.ts)

    import { defineConfig } from 'vite'
    import tailwindcss from '@tailwindcss/vite'
    export default defineConfig({
    plugins: [
       tailwindcss(),
    ],
    })

2.3 导入 Tailwind CSS (style.css，全局的css处导入皆可)

@import "tailwindcss";

2.4 Visual Studio Code 安装官方提示插件

Tailwind Css IntelliSense，安装这个插件后写 tailwindcss 就会有代码提示了，鼠标悬浮在tailwindcss上即可查看详细信息。

注意事项

在 Tailwind CSS 4.0 中，如果你提供了全局重置样式 * { padding: 0; margin: 0; } 会与 Tailwind 的默认样式冲突，导致内边距和外边距工具类失效。这是因为 Tailwind 4.0 默认启用了preflight 功能，它会自动重置所有元素的内外边距。简单来说就是tailwindcss的边距优先级非常低，容易被覆盖，导致不生效。

3、代码高亮

3.1 安装插件

npm install highlight.js --save

3.2 代码高亮配置文件

• /src/highlight.ts
• 按需导入需要高亮的语言
• 主题也是需要导入的，可以根据自己的喜好导入

import hljs from 'highlight.js/lib/core';
// 导入需要的语言高亮
import javascript from 'highlight.js/lib/languages/javascript';
import typescript from 'highlight.js/lib/languages/typescript';
import css from 'highlight.js/lib/languages/css';
import csharp from 'highlight.js/lib/languages/csharp';
import php from 'highlight.js/lib/languages/php';
import python from 'highlight.js/lib/languages/python';
import objectivec from 'highlight.js/lib/languages/objectivec';
import bash from 'highlight.js/lib/languages/bash';
import xml from 'highlight.js/lib/languages/xml'; // 用于HTML

// 亮色主题
// import 'highlight.js/styles/default.css';
// 导入暗黑主题样式
import 'highlight.js/styles/atom-one-dark.css';

hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('typescript', typescript);
hljs.registerLanguage('css', css);
hljs.registerLanguage('csharp', csharp);
hljs.registerLanguage('php', php);
hljs.registerLanguage('python', python);
hljs.registerLanguage('objectivec', objectivec);
hljs.registerLanguage('bash', bash);
hljs.registerLanguage('xml', xml);
hljs.registerLanguage('html', xml);

export default hljs;

3.3 组件封装

• /src/components/CodeBlock.vue

<template>
  <div class="m-2 rounded-sm overflow-hidden">
    <div class="flex justify-between items-center px-5 py-3 bg-gray-900">
      <span class="text-[20px] text-white font-bold">{{ language }}</span>
      <div ref="copyButtonRef" class="copy-button size-7 p-1 rounded-sm cursor-pointer bg-gray-600 hover:bg-gray-500"
        title="复制代码" @click="copyCode">
        <svg v-if="!copied" xmlns="http://www.w3.org/2000/svg" class="icon text-white" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2">
          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
          <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
        </svg>
        <svg v-else xmlns="http://www.w3.org/2000/svg" class="icon text-green-500" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2">
          <path d="M20 6L9 17l-5-5"></path>
        </svg>
      </div>
    </div>
    <div class="code-block-content">
      <pre><code ref="codeRef" :class="language">{{ code }}</code></pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue';
import hljs from '../highlight';
import ClipboardJS from 'clipboard';



const props = defineProps({
  language: {
    type: String,
    default: 'javascript'
  },
  code: {
    type: String,
    default: ''
  },
  showLineNumbers: {
    type: Boolean,
    default: false
  }
});

const codeRef = ref(null);
const copyButtonRef = ref(null);
const copied = ref(false);
let clipboard:any = null;

onMounted(() => {
  // 等待 DOM 更新后执行代码高亮
  nextTick(() => {
    if (codeRef.value) {
      hljs.highlightElement(codeRef.value);
    }
  });
});

// 复制代码到剪贴板
const copyCode = () => {
  if (!clipboard && copyButtonRef.value && codeRef.value) {
    clipboard = new ClipboardJS(copyButtonRef.value, {
      text: () => props.code,
    });

    clipboard.on('success', () => {
      copied.value = true;
      setTimeout(() => {
        copied.value = false;
      }, 2000);
    });
  }

  // 触发复制
  if (clipboard) {
    clipboard.onClick({ currentTarget: copyButtonRef.value });
  }
};

onUnmounted(() => {
  // 清理资源
  if (clipboard) {
    clipboard.destroy();
    clipboard = null;
  }
});

// 监听代码变化，更新高亮
watch(() => props.code, () => {
  nextTick(() => {
    if (codeRef.value) {
      hljs.highlightElement(codeRef.value);
    }
  });
});
</script>

<style scoped></style>

3.4 使用

<template>
       <CodeBlock language="javascript" code='需要展示的代码' />
</template>

<script setup lang="ts">
import CodeBlock from '@/components/CodeBlock.vue'
</script>

4、AI生成代码

我是手动把路由配置好后再让AI帮我写的，如果实在懒得写得话，也可以完全交给AI，把需求描述好即可。

1. 首先打开AI聊天窗口，选择右侧 Agent 能直接编辑代码，左侧跟普通AI没区别
2. crl + a 全选就能快速引用了
3. 说出你的详细需求，等代码生成完，看一下有没有报错，可能存在报错，让他修复即可。

效果预览

这几个页面，只有代码高亮和快速开始页是手动写的，其它全部是由AI生成的，不知道各位觉得咋样，UI我是觉得已经非常漂亮了，让我自己写的话可能丑的批爆。

5、项目部署

5.1 新建仓库

首先，需要需要在 github 创建新的仓库，新的仓库命名必须是 用户名.github.io 。我这已经创建过了，正常的话是不会报红的。

5.2 配置

打开新建的仓库，查看配置

• 图中3有图中地址即代表创建成功，普通仓库是没有的。

• 到这一步就能直接部署静态网站了，访问图中3的地址即可访问项目。但是，直接放进去的话只能部署一个网站，为了能够多部署，可以在仓库中创建文件夹，每个文件夹下面单独部署，这样就能部署多个项目。

• 我就创建了一个 tailwindcss 的文件夹，有关 tailwindcss 的网站部署在tailwindcss文件夹下，访问的时候只需在末尾新增 tailwindcss 路径即可，zsnoin.github.io/tailwindcss...

5.3 打包配置

1. 需要解决打包的文件的文件名是否出现 _（下划线） 开头的，需要把下划线给去了，不然无法访问，就这傻鸟问题，害我查了半天问题。
2. 如果你直接部署在最大的仓库下的话就不需要配置基础路径，否则需要配置基础路径，不然打包后找不到文件路径，基础路径就是 你创建的文件夹的名字。

在 vite.config.ts 中配置即可

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
    plugins: [vue(), tailwindcss()],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    },
    build: {
      rollupOptions: {
        output: {
          // 自定义 chunk 文件名（移除默认的下划线前缀）
          chunkFileNames: (chunkInfo: any) => {
            // 获取原始文件名（不含路径）
            const name = chunkInfo.name || 'chunk';
            // 替换可能的下划线前缀为连字符
            const cleanName = name.replace(/^_+/, '');
            // 生成新的文件名（格式：assets/js/模块名-哈希值.js）
            return `assets/js/${cleanName}-[hash].js`;
          },

          // 自定义入口文件和静态资源文件名（可选）
          entryFileNames: 'assets/js/[name]-[hash].js',
          assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
        },
      },
    },
    base:'/tailwindcss/'
  })

最后就是打包，并把打包好的所有文件上传到对应仓库中即可。

6、项目地址

项目地址：github.com/Zsnoin/tail...

网站体验地址：zsnoin.github.io/tailwindcss...