day15 学一下Tailwindcss（java转ts全栈/3r教室）

news2025/1/12 1:57:39

目前距离全栈差得最多的是前端，而对于前端主要是CSS一直不熟悉，觉得很复杂写起来总是不上道，所以特别关注下Tailwindcss吧，其他前端框架可以先放放，多说无益直接用tailwindcss做个页面试试

看下文档：Tailwind CSS - 只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。 | TailwindCSS中文文档 | TailwindCSS中文网
- 看目录其实和css差不多的，看起来css里能操作的属性tailwindcss里也有
- 不一样的地方在于，首先都是使用原子类来操作的，不用自己写css，并且对长度、颜色都有约束，并不是所有px值都有默认的原子类，这也可以理解从设计的角度来看，“像素完美” 的概念已经不再适用于现代 Web 开发。现代 Web 设计更注重响应式和灵活性，而不是固定的像素值。 tailwindcss 新手入门介绍_哔哩哔哩_bilibili
安装和使用：我使用了tailwind cli的方式进行了安装，然后直接写起来（本来我想着先巩固下css在学tailwind，但太慢了，况且其实内容差不多，所以直接上手tailwindcss吧，变学tailwind语法，一边复习css的概念）
- 并且也要开始前端仿站练习，锤炼css来了，找了个游戏官网，今天先从header开始【HTML+CSS项目】HTML5期末大作业——仿阴阳师游戏官网首页_HTML5+CSS项目实战_HTML网页制作（附源码+课件）_哔哩哔哩_bilibili
原生的html css

    <!-- 头部开始 -->
    <div class="header">
        <div class="header-left">游戏全目录</div>
        <img src="./images/logo_b5525b7.png" alt="">
        <div class="header-right">限时领取免费课程</div>
    </div>
    <!-- 头部结束 -->

/* 头部样式开始 */
.header {
    width: 100%;
    height: 55px;
    background-color: #fff;
    font-size: 12px;
    line-height: 55px;
}

.header-left {
    float: left;
    width: 179px;
    height: 54px;
    background-color: #cf1132,
}

.header-right {
    float: right;
    width: 138px;
    height: 54px;
    border-left: 1px solid #dadada;
}

tailwind写的

 <!-- 头部开始 -->
  <div class="flex flex-row">
    <div class="flex w-44 h-14 items-center justify-center text-center text-white bg-red-600">游戏全目录</div>
    <div class="flew grow items-center justify-center">
      <img class="block mx-auto" src="../images/logo_b5525b7.png" alt="">
    </div>
    <div class="flex w-44 h-14 items-center justify-center text-center border-l-2 border-gray-200">限时领取免费课程</div>
  </div>
<!-- 头部结束 -->