TailwindCss的基本使用

原创已于 2023-11-27 14:44:42 修改 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #前端 #css

于 2023-10-17 17:09:23 首次发布

css 专栏收录该内容

1 篇文章

订阅专栏

文章介绍了TailwindCSS如何简化CSS编写，特别是其在响应式设计中的应用。通过预设断点和灵活的写法，如使用flex和grid布局，以及媒体查询，Tailwind提高了开发效率和可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于tailwindCss

感受

在了解tailwindCss之前先说一下响应式开发

关于tailwindCss

感受

在没接触tailwindCss之前都是使用命名css，对于css的起名对于我来说真是浪费脑细胞，只能无脑的遵循BEM命名方法。我觉得写css就应该随心所欲，不应该把过多的时间放在css命名上，但是在接触到tailwindCss这个工具库的时候，我仿佛发现了css的新世界。

在了解tailwindCss之前先说一下响应式开发

介绍

响应式开发是一种用于创建能够适应不同屏幕尺寸和设备的网页设计和开发方法。随着不同设备的普及，如手机、平板电脑、笔记本电脑、台式电脑等，网站需要能够在各种屏幕尺寸下提供良好的用户体验。响应式开发允许网站根据用户设备的屏幕大小和分辨率动态地调整和优化布局、字体大小、图像大小等元素，以确保在各种设备上都能够以最佳方式呈现。

基本实现

基本布局：使用flex、grid、百分比（以及其他这里就选三个常用的来说），来适应不同的屏幕宽度。
媒体查询：使用 CSS 的媒体查询功能来根据预设的断点应用不同的样式。这使得可以根据需要隐藏、显示、调整或重新排列元素。
移动优先：采用“移动优先”设计原则，首先为小屏幕设备设计网站，然后逐渐添加和优化大屏幕设备的布局和样式。

在传统的css响应式开发中，比如react我们需要在xx.module.css文件中写css，还要写多个媒体查询在不同断点下实现不同的样式和布局，这显得可阅读性非常差，可维护性也不是很友好，我是这么觉得，然而tailwind实现响应式开发就非常便捷。

下面介绍tailwindCss的基本使用

写法

<div className='flex justify-center items-center p-2'>
   <span></span>
   <span></span>
   ...
</div>

简单明了，使用便捷，完全不用愁为当前标签命名，直接写即可。几乎所有的css命名都可以在tailwind官网导航中找到，就举以下几个例子。

padding：p-2表示padding： 2px、px-1 表示横向padding为4px、 py-1 表示纵向padding为4px、上下左右分别为pt、pb、pl、pr。

如果在UI设计稿中没有符合4的倍数的尺寸，也可以在tailwind.config.js中去定制spacing，可以改为任何数值，只要符合产品规范即可。

tailwind官网是这样说的

By default the spacing scale is inherited by the padding, margin, width, height, maxHeight, gap, inset, space, translate, scrollMargin, and scrollPadding core plugins.

module.exports = {
  theme: {
    spacing: {
      '1': '8px',
      '2': '3rem',
      '3': '30%',
      '4': '24px',
      '5': '32px',
      '6': '48px',
    }
  }
}

这样改完之后 px-1表示横向padding为8px、px-2表示横向padding为3rem...

如果发现有一些尺寸单位不存在预设的里面，完全可以写成独立的

在tailwind中任何单位都可以[]这样来写，比如px-[14px]表示横向..为14px、m-[23px]、w-[20%]，只要是符合规范的单位都可以，又比如bg-[#ccc]亦或者是text-[15px]。

还有好多tailwind为我们提供的class，比如shadow（box-shadow）、round（border-raduis）等等，这让不会设计的没有美感的你也会喜欢上使用tailwindCss。

具体其他css单位可查阅官网：Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

预设断点

tailwind提供了5个预设断点，分别是sm（640px）、md（768px）、lg（1024px）、xl（1280x）、2xl（1536px），当然断点并不是tailwind固定的，也可以通过tailwind.config.js根据产品去定制。

module.exports = {
  theme: {
    extend: {
      screens: {
        'sm': '480px',
        'md': '768px',
        'lg': '1024px',
        'xl': '1280px',
      },
    }
  },
}

一般境况下5个预设断点完全够用，但是可能会碰到一些不得不写除5个断点以外的媒体查询，但是不用担心，tailwind为我们提供了便捷媒体查询.

max-[1120px]:xxx 表示浏览器尺寸小于等于1120px执行的tailwind xxx代码

min-[1120px]:xxx 表示浏览器尺寸大于等于1120px执行的tailwind xxx代码

响应式开发设计

本着移动优先的原则，在写tailwind的时候需要这样写：

1.首先看下flex布局

<div className='flex flex-col lg:flex-row gap-5 '>

默认是flex竖向布局，在网页宽度达到断点lg(>=1024px)的时候flex变为横向布局

2.再看一下grid布局

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5">

默认是gird布局1列，但是在浏览器尺寸达到断点md（>=768px）的时候变成2列，又随着浏览器尺寸的缩放，在达到lg（>=1024px）的时候变成5列。

以上就是对tailwindCss的基本使用与解释，希望对你的开发有所帮助。