欢迎来到《尾风 CSS 课程》！在这门课程中，我们将深入探索 Tailwind CSS，这是一个功能强大的 CSS 框架，它使用实用类来提供丰富的 UI 组件，同时保持代码的简洁性和灵活性。Tailwind CSS 的设计理念是提供一种基础工具集，让你能够快速构建美观且响应式的网站，而无需从零开始构建 CSS 代码。
安装与设置要开始使用 Tailwind CSS，首先需要在项目中安装它。推荐使用 npm 或 yarn 进行安装。在你的项目目录中运行以下命令：
# 通过npm安装
npm install tailwindcss
# 或者使用yarn
yarn add tailwindcss安装完成后，需要配置 tailwind.config.js 文件来定义你的自定义设置。创建此文件并在其中添加基本配置：
module.exports = {
// 基本配置
};接下来，在你的 HTML 文件中引入 Tailwind CSS，并设置前缀器（prefixer），以确保在生产环境中正确处理 CSS 样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的项目</title>
<!-- 引入 Tailwind CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css">
</head>
<body>
<!-- 你的HTML代码 -->
</body>
</html>Tailwind CSS 的核心在于它的实用类。这些实用类提供了一系列基本样式，包括但不限于颜色、边框、内边距、外边距、文本样式、背景等。下面是一些基础实用类的示例：
颜色类
text-blue-500：文本颜色为蓝色系的500级颜色。bg-red-300：背景颜色为红色系的300级颜色。
边框类
border：添加边框。border-dashed：设置边框为虚线。border-gray-300：边框颜色为灰色系的300级颜色。
内边距类
p-4：所有内边距设置为4个单位。py-2：垂直内边距设置为2个单位。px-3：水平内边距设置为3个单位。
外边距类
m-2：所有外边距设置为2个单位。my-4：垂直外边距设置为4个单位。mx-3：水平外边距设置为3个单位。
文本样式类
font-bold：设置字体为粗体。text-lg：文本大小设置为较大的样式。text-2xl：文本大小设置为2倍大的样式。
Tailwind CSS 提供了一系列布局类，帮助你轻松实现响应式设计。以下是一些常用的布局类示例：
容器与间距
max-w-sm：最大宽度为小型屏幕（如手机）。mx-auto：元素自动居中。mt-8：垂直外边距设置为8个单位。
列表与网格布局
grid-cols-2：网格布局，每个单元格的列数为2。flex-col：元素以垂直方式排列。justify-center：元素在容器内水平居中对齐。
弹性布局
flex：元素变为弹性布局。items-center：垂直居中对齐。gap-4：元素之间的间距设置为4个单位。
Tailwind CSS 提供了大量的预定义组件，但你也可以根据需要自定义组件。例如，创建一个自定义的按钮样式：
module.exports = {
theme: {
extend: {
colors: {
'my-brand': {
50: '#f0f9eb',
100: '#e1f5d4',
200: '#c3eb9d',
300: '#a2d67e',
400: '#83c86b',
500: '#67b555',
600: '#529f4a',
700: '#408a3f',
800: '#2f7434',
900: '#1d5a29',
},
},
buttons: {
myCustomButton: {
container: 'bg-my-brand-500 hover:bg-my-brand-600 text-white px-4 py-2 rounded',
},
},
},
},
};接着，在 HTML 中使用自定义按钮类：
<button class="myCustomButton">我是自定义按钮</button>到目前为止，你已经了解了如何安装 Tailwind CSS、配置基本样式、布局以及如何创建自定义组件。现在，我们来构建一个简单的项目。这个项目是一个简单的待办事项应用，使用 Tailwind CSS 来美化其界面。
首先创建一个项目目录，然后根据以下步骤完成：
创建 HTML 结构
在项目目录中，创建一个名为 index.html 的文件，并添加以下 HTML 结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>待办事项应用</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css">
</head>
<body>
<div class="max-w-md mx-auto mt-8 bg-white p-6 rounded shadow">
<h1 class="text-xl font-bold text-center mb-4">待办事项应用</h1>
<form class="flex items-center mb-4">
<input type="text" placeholder="添加新待办事项" class="w-full px-3 py-2 mr-2 text-gray-700 border border-gray-300 rounded" />
<button type="submit" class="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600">添加</button>
</form>
<ul class="list-disc pl-8 mt-4">
<!-- 待办事项列表项将动态添加 -->
</ul>
</div>
<script src="script.js"></script>
</body>
</html>JavaScript 示例
在项目目录中，创建一个名为 script.js 的文件，添加以下 JavaScript 代码以实现待办事项的应用：
document.addEventListener('DOMContentLoaded', function () {
const form = document.querySelector('form');
const ul = document.querySelector('ul');
form.addEventListener('submit', function (event) {
event.preventDefault();
const input = document.querySelector('input[type="text"]');
const newTodo = input.value.trim();
if (newTodo !== '') {
const li = document.createElement('li');
li.textContent = newTodo;
li.classList.add('bg-gray-200', 'p-2', 'rounded', 'mr-2', 'mb-2');
const removeBtn = document.createElement('button');
removeBtn.textContent = '删除';
removeBtn.classList.add('text-red-500', 'hover:text-red-700', 'cursor-pointer', 'ml-2');
removeBtn.addEventListener('click', function () {
li.remove();
});
li.appendChild(removeBtn);
ul.appendChild(li);
input.value = '';
}
});
});通过这个课程，你不仅学会了如何使用 Tailwind CSS 这个强大的 CSS 框架，还了解了如何在项目中应用各种实用类、布局组件和自定义样式。希望你能在实践中灵活运用这些知识，构建出更多美观且响应式的网页界面。
随时随地看视频
