Logo

菜单

Administrator
发布于 2024-10-09 / 42 阅读
0
0

Next.js 零基础教程3 Tailwind CSS学习

CSS样式学习

上一篇文章讲到如何创建一个脚手架程序，目前我们已经有了一个nextjs的基本框架，因此我们可以在这个基础上进行改造。
打开我们项目中的page.tsx页面，这里是程序的主页面，也就是我们访问地址时候第一个看见的页面
css配置
将page页面修改为，没有任何css样式的样子

import Link from 'next/link';
export default function Page() {
  return (
    <main>
      <h1>欢迎来到曲速引擎Warp Driver教程</h1>
      <p>
        这是 <a href="https://nextjs.org/learn/">Next.js学习课程</a> 的示例，由曲速引擎Warp Driver提供技术讲解。
      </p>
      <Link href="/login">
        登录
      </Link>
    </main>
  );
}

首页CSS
代码更新之后，页面也随之改变为没有样式的样子
没配置css图

配置全局CSS

首先我们要将默认目录下的globals.css删除掉，因为这个是默认样式，接下来在app文件夹下创建一个ui的文件夹，用于存储globals.css，目录结构如下：
修改路径

接下来往globals.css写入全局样式

/* 导入 Tailwind CSS 的基础样式、组件样式和工具类 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义 input[type='number'] 的样式 */
input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

这里有个新的概念就是Tailwind CSS，Tailwind CSS 是一个高度可定制的低级 CSS 框架，它采用实用优先的方法来构建现代网页界面。与传统的 CSS 框架不同，Tailwind 不提供预设的组件样式，而是提供大量的原子级 CSS 类，让开发者能够通过组合这些类来快速构建独特的设计。它通过在 HTML 中直接应用类名来定义样式，从而减少了编写自定义 CSS 的需求，提高了开发效率。Tailwind 的设计理念鼓励一致性，同时保持灵活性，使得开发者可以轻松创建响应式、可维护的用户界面。它的配置系统允许开发者根据项目需求自定义颜色、间距、断点等，使得 Tailwind 能够适应各种设计系统。总的来说，Tailwind CSS 通过提供一套全面的低级样式工具，简化了 CSS 的编写过程，使得前端开发更加高效和灵活。

由于我们移动了默认的全局css样式，因此需要在layout.tsx上面修改地址 将默认地址修改为import "@/app/ui/globals.css";
导入依赖

这个为添加了全局css样式的代码
修改配置
接下来我们把全局css样式的代码删除，可以观察到主要屏蔽了上下箭头
修改配置

单个语义化标签添加Tailwind CSS

main标签修改，添加 className="flex min-h-screen flex-col p-6"
css配置
这个类名字符串 flex min-h-screen flex-col p-6 是 Tailwind CSS 的实用类组合，每个类都有特定的样式效果。
每个类的含义：
flex: 将元素设置为弹性盒子容器，相当于 CSS 中的 display: flex;
min-h-screen：设置元素的最小高度为屏幕的全高，等同于 CSS 中的 min-height: 100vh;
flex-col：设置弹性盒子的主轴方向为垂直方向（列），相当于 CSS 中的 flex-direction: column;
p-6: 给元素添加内边距（padding）在 Tailwind 中，6 通常对应 1.5rem 或 24px，等同于 CSS 中的 padding: 1.5rem;

这组类的组合效果：
创建一个弹性盒子容器
容器最小高度为整个视口高度
容器内的元素将垂直排列（从上到下）
容器四周有 1.5rem 的内边距
修改css后的格式

然后我们可以通过这样的修改，对主页进行美化

import Link from 'next/link';

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
        {/* <AcmeLogo /> */}
      </div>
      <div className="mt-4 flex grow flex-col gap-4 md:flex-row">
        <div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
          <p className={`text-xl text-gray-800 md:text-3xl md:leading-normal`}>
            <strong>欢迎来到曲速引擎Warp Driver教程</strong> 这是{' '}
            <a href="https://www.dataeast.cn/" className="text-blue-500">
              Next.js 学习课程
            </a>
            的示例，由曲速引擎Warp Driver为您呈现。
          </p>
          <Link
            href="/login"
            className="flex items-center gap-5 self-start rounded-lg 
                      bg-blue-500 px-6 py-3 text-sm font-medium text-white 
                      transition-colors hover:bg-blue-400 md:text-base"
          >
            <span>开始学习</span>
          </Link>
        </div>
        <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
          {/* 在此添加主图像 */}
        </div>
      </div>
    </main>
  );
}

添加部分内容

拆解Tailwind CSS的含义

我们把网页分块理解，将后面的代码先注释掉，在return()里面使用 {/* */}进行注释
代码
<div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
flex: 将元素设置为弹性容器
h-20: 设置元素高度为 20 单位（通常是 5rem 或 80px）
shrink-0: 防止元素在flex容器中缩小
items-end: 将flex容器中的项目对齐到交叉轴的末端（在这里是底部）
rounded-lg: 添加大号圆角
bg-blue-500: 设置背景颜色为蓝色（500 是颜色强度）
p-4: 设置内边距为 4 单位（通常是 1rem 或 16px）
md:h-52: 在中等尺寸屏幕（md）上，将高度设置为 52 单位（通常是 13rem 或 208px）

这个 div 创建了一个蓝色背景的容器，在小屏幕上高度为80px，在中等及以上尺寸的屏幕上高度为 208px。它有圆角，内部元素会对齐到底部，并且有一定的内边距。这个元素不会在flex容器中缩小，保持其大小。
头部样式

下面就不一一展示什么意思了，一下为整个代码的注释信息，可以参考

import Link from 'next/link';

export default function Page() {
  return (
    {/* 主容器：弹性布局，最小高度为屏幕高度，垂直排列，内边距6单位 */}
    <main className="flex min-h-screen flex-col p-6">
      {/* 顶部蓝色区域：弹性布局，固定高度，不缩小，底部对齐，圆角，蓝色背景 */}
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
        {/* <AcmeLogo /> */}
      </div>
      {/* 主要内容区：上边距4单位，弹性增长，垂直排列（中等屏幕上水平排列），间隔4单位 */}
      <div className="mt-4 flex grow flex-col gap-4 md:flex-row">
        {/* 左侧文本区：弹性垂直排列，居中对齐，间隔6单位，圆角，浅灰背景 */}
        <div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
          {/* 文本段落：大号文本，深灰色，中等屏幕上更大字号和行高 */}
          <p className={`text-xl text-gray-800 md:text-3xl md:leading-normal`}>
            <strong>欢迎来到曲速引擎Warp Driver教程</strong> 这是{' '}
            {/* 链接：蓝色文本 */}
            <a href="https://www.dataeast.cn/" className="text-blue-500">
              Next.js 学习课程
            </a>
            的示例，由曲速引擎Warp Driver为您呈现。
          </p>
          {/* 登录链接：弹性布局，居中对齐，间隔5单位，自身起始对齐，圆角 */}
          {/* 蓝色背景，内边距，小号字体（中等屏幕上基础字号），白色文本 */}
          {/* 颜色过渡效果，悬停时背景变浅 */}
          <Link
            href="/login"
            className="flex items-center gap-5 self-start rounded-lg 
                      bg-blue-500 px-6 py-3 text-sm font-medium text-white 
                      transition-colors hover:bg-blue-400 md:text-base"
          >
            <span>开始学习</span>
          </Link>
        </div>
        {/* 右侧区域：弹性布局，居中对齐，内边距 */}
        <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
        </div>
      </div>
    </main>
  );
}

需要寻找Tailwind CSS每个模块的含义可以参考官方网站的描述
tailwind css类型

更详细内容查看
独立博客 https://www.dataeast.cn/
CSDN博客 https://blog.csdn.net/siberiaWarpDrive
B站视频空间 https://space.bilibili.com/25871614?spm_id_from=333.1007.0.0
关注 “曲速引擎 Warp Drive” 微信公众号
公众号二维码

Next.js 零基础教程4 网页...
Next.js 零基础教程2 脚手...

评论