手记

尾风 CSS 课程:轻松掌握高效 CSS 框架

课程简介

欢迎来到《尾风 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 框架,还了解了如何在项目中应用各种实用类、布局组件和自定义样式。希望你能在实践中灵活运用这些知识,构建出更多美观且响应式的网页界面。

0人推荐
随时随地看视频
慕课网APP