Tailwind CSS入门体验

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件和任何其他类名称模板，生成相应的样式，然后将它们写入静态 CSS 文件。
它快速、灵活且可靠—— 具有零运行时间。

毕竟不会写前端，原来的页面都直接简单的用Bootstrap 框架，然后看到现在挺多用Tailwind CSS的，就试试，看了下效果的确比Bootstrap肯定是丰富很多的。（反正都是让AI调整，没啥基础也没关系，能差不多看懂html就行了）

官网文档：https://tailwind.nodejs.cn/docs/

官网也有提供体验网址：https://play.tailwindcss.com/

准备工作

1.安装Node.js。这个反正用Hexo博客和Gitbook的，之前都已经有装好了。
2.Nginx等服务器。

体验步骤

基本上看官方文档上 Tailwind CLI上面有具体的步骤。

# 1.创建项目目录
mkdir my-tailwind-project
cd my-tailwind-project

# 2.初始化npm项目（已安装node）
npm init -y

# 3.安装Tailwind CSS和所需依赖
npm install -D tailwindcss
npx tailwindcss init

4.创建Tailwind CSS配置文件tailwind.config.js

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

5.将 Tailwind 指令添加到 CSS（src/input.css）

需要先在项目目录下创建src目录，再创建input.css文件。内容如下：

1
2
3

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

6.编译Tailwind CSS

在 package.json 文件中添加一个脚本

1
2
3

"scripts": {
  "build:css": "npx tailwindcss -i ./src/input.css -o ./src/output.css --minify"
}

7.在src目录下创建 index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebStackPage Navigation</title>
  <link href="dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
  <nav class="bg-white shadow-md">
    <div class="container mx-auto p-4 flex justify-between items-center">
      <a href="#" class="text-2xl font-bold text-gray-800">WebStackPage</a>
      <div>
        <a href="#home" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Home</a>
        <a href="#categories" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Categories</a>
        <a href="#about" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">About</a>
        <a href="#contact" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
      </div>
    </div>
  </nav>

  <main class="container mx-auto mt-8">
    <section id="home" class="my-8">
      <h2 class="text-3xl font-bold text-gray-800">Welcome to WebStackPage</h2>
      <p class="mt-2 text-gray-600">A curated list of useful websites and resources.</p>
    </section>

    <section id="categories" class="my-8">
      <h2 class="text-2xl font-bold text-gray-800">Categories</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
        <div class="bg-white p-6 rounded-lg shadow-md">
          <h3 class="text-xl font-semibold text-gray-800">Development</h3>
          <ul class="mt-2">
            <li><a href="https://developer.mozilla.org/" class="text-blue-500 hover:underline">MDN Web Docs</a></li>
            <li><a href="https://stackoverflow.com/" class="text-blue-500 hover:underline">Stack Overflow</a></li>
            <li><a href="https://github.com/" class="text-blue-500 hover:underline">GitHub</a></li>
          </ul>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-md">
          <h3 class="text-xl font-semibold text-gray-800">Design</h3>
          <ul class="mt-2">
            <li><a href="https://dribbble.com/" class="text-blue-500 hover:underline">Dribbble</a></li>
            <li><a href="https://www.behance.net/" class="text-blue-500 hover:underline">Behance</a></li>
            <li><a href="https://www.canva.com/" class="text-blue-500 hover:underline">Canva</a></li>
          </ul>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-md">
          <h3 class="text-xl font-semibold text-gray-800">Learning</h3>
          <ul class="mt-2">
            <li><a href="https://www.coursera.org/" class="text-blue-500 hover:underline">Coursera</a></li>
            <li><a href="https://www.udemy.com/" class="text-blue-500 hover:underline">Udemy</a></li>
            <li><a href="https://www.khanacademy.org/" class="text-blue-500 hover:underline">Khan Academy</a></li>
          </ul>
        </div>
      </div>
    </section>

    <section id="about" class="my-8">
      <h2 class="text-2xl font-bold text-gray-800">About</h2>
      <p class="mt-2 text-gray-600">WebStackPage is a curated list of useful websites and resources for developers, designers, and learners.</p>
    </section>

    <section id="contact" class="my-8">
      <h2 class="text-2xl font-bold text-gray-800">Contact</h2>
      <p class="mt-2 text-gray-600">Get in touch with us through our contact form or email.</p>
    </section>
  </main>
</body>
</html>

8.构建css文件

通过以下命令构建 output.css 文件。每次修改 index.html 中的文件后，添加了新的class，就运行下面的指令重新构建 css文件。

1	npm run build:css

最后，把 index.html文件和output.css文件一起放到nginx目录中就可以访问了。

PS.VS Code中也有Tailwind CSS IntelliSense 插件。很方便调整一些颜色之类的。