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

目前距离全栈差得最多的是前端，而对于前端主要是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

          
          
      
              
      游戏全目录
              
      限时领取免费课程
          
          
      

      /* 头部样式开始 */
      .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写的

         
          
        
            
        游戏全目录
            
        
              
            
        限时领取免费课程
          
        
        

        可以看到，确实代码量减少了，不用写css了，因为css原子类都提前封装好了

        

        程序员提升&&转型交流群：954614622

        想报名3r教室的可以找我有内部优惠