首页 前端知识 Tailwind CSS 原子化开发初体验

Tailwind CSS 原子化开发初体验

2024-02-17 09:02:09 前端知识 前端哥 975 247 我要收藏

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何模板中的 CSS 类(class)名,然后生成相应的样式代码并写入到一个静态 CSS 文件中。他快速、灵活、可靠,没有运行时负担。再也不用为了取一个 classname 类名而烦恼了。

Tailwind CSS

一、安装

这里以 React + Vite 为例

  1. 安装依赖,生成 postcss.config.jstailwind.config.js 配置文件
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
  1. postcss.config.js 中引入 tailwindcssautoprefixer
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
  1. 配置 tailwind.config.js 文件
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: {
    preflight: false,
  },
}
  1. 新建 tailwind.css 入口文件
/* @/assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. main.jsx 中引入 tailwind.css 文件
import { ConfigProvider } from 'antd'
import ReactDOM from 'react-dom/client'
import zhCN from 'antd/locale/zh_CN'
import Routers from '@/router'
import '@/assets/css/tailwind.css'
import 'dayjs/locale/zh-cn'

ReactDOM.createRoot(document.getElementById('root')).render(
    <ConfigProvider locale={zhCN}>
      <Routers />
    </ConfigProvider>
)

二、使用

1、width、height、line-height

常用值:

  • w-[200px]:width: 200px;
  • h-[100vh]:height: 100vh;
  • min-h-[100vh]:min-height: 100vh;
  • max-h-[100vh]:max-height: 100vh;
  • w-full:width: 100%;
  • h-[100%]:height: 100%;
  • min-h-full:min-height: 100%;
  • min-h-[calc(100vh-60px)]: min-height: calc(100vh - 60px);
  • leading-none:line-height: 1;
  • leading-tight:line-height: 1.25;
  • leading-3:line-height: 0.75rem; /* 12px */
  • leading-4:line-height: 1rem; /* 16px */
  • leading-[20px]:line-height: 20px;
<div class="w-[200px] min-h-[100vh]"></div>
<!--等价于-->
<div style="width: 200px; min-height: 100vh"></div>

2、background

<div class="bg-[#f00]"></div>
<!--等价于-->
<div style="background-color: #f00"></div>

3、font、text-align

<div class="text-[#f00] text-[20px] font-bold text-center"></div>
<!--等价于-->
<div style="color: #f00; font-size: 20px; font-weight: 700; text-align: center;"></div>

4、border、border-radius

常用值:

  • rounded-noneborder-radius: 0;
  • rounded:0.25rem; /* 4px */
  • rounded-md:小圆角
  • rounded-lg:大圆角
  • rounded-full:圆形
<div class="border-[1px] border-[#f00] border-solid rounded-[6px]"></div>
<!--等价于-->
<div style="border: 1px solid #f00; border-radius: 6px;"></div>

参考:https://www.tailwindcss.cn/docs/border-radius

5、margin、padding

常用值:

  • m-0:margin: 0;
  • mx-0: margin-left: 0; margin-right: 0;
  • my-0: margin-top: 0; margin-bottom: 0;
  • mt-[10px]: margin-top: 1px;
  • m-[15px]: margin: 15px;
<div class="m-[10px] p-[10px]"></div>
<!--等价于-->
<div style="margin: 10px; padding: 10px;"></div>

参考:https://www.tailwindcss.cn/docs/margin

6、flex

常用值:

  • flex:display: flex;
  • flex-row:flex-direction: row;
  • flex-col:flex-direction: column;
  • flex justify-between: justify-content: space-between;
  • flex justify-center: justify-content: center;
  • flex items-center: align-items: center;
<div class="flex flex-row justify-between items-center"></div>
<!--等价于-->
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center;"></div>

参考:https://www.tailwindcss.cn/docs/flex

7、overflow

常用值:

  • overflow-hidden:overflow: hidden;
  • overflow-auto:overflow: auto;
  • overflow-x-auto:overflow-x: auto;
  • overflow-y-scroll:overflow-y: scroll;
<div class="overflow-y-scroll"></div>
<!--等价于-->
<div style="overflow-y: scroll;"></div>

参考:https://www.tailwindcss.cn/docs/overflow

8、hover、focus、active、first、last

常用值:

  • hover:bg-[#f00]:鼠标悬浮时的背景色
  • first:bg-[#f00]:第一个子元素的背景色
<div class="hover:bg-[#f00] focus:bg-[#f00] active:bg-[#f00]"></div>

参考:https://www.tailwindcss.cn/docs/hover-focus-and-other-states

9、important

<div class="!tw-font-bold"></div>
<!--等价于-->
<div style="font-weight: 700 !important;"></div>

参考:https://www.tailwindcss.cn/docs/configuration#important

10、display

常用值:

  • hidden:display: none;
  • block:display: block;
  • inline-block:display: inline-block;
  • flex:display: flex;
<div class="flex"></div>
<!--等价于-->
<div style="display: flex;"></div>

11、white-space、text-overflow

常用值:

  • whitespace-normal:white-space: normal;
  • whitespace-nowrap:white-space: nowrap;
  • whitespace-pre:white-space: pre;
  • whitespace-pre-wrap:white-space: pre-wrap;
  • whitespace-break-spaces:white-space: break-spaces;
  • text-ellipsis:text-overflow: ellipsis;
  • text-clip:text-overflow: clip;
  • truncate:text-overflow: ellipsis; overflow: hidden; white-space: nowrap;(文本溢出隐藏)
<div class="w-[150px] whitespace-nowrap overflow-hidden text-ellipsis">文本溢出隐藏</div>
<!--简洁写法-->
<div class="w-[150px] truncate">truncate 文本溢出隐藏</div>
<!--等价于-->
<div style="width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">truncate 文本溢出隐藏</div>

欢迎访问:天问博客

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2197.html
评论
发布的文章

jquery.动画和事件

2024-03-03 11:03:13

jQuery位置方法

2024-03-03 11:03:13

jQuery中val()和text()的区别

2024-03-03 11:03:11

jquery实现甘特图时效管理

2024-03-03 11:03:47

django之 echarts数据可视化

2024-03-03 11:03:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!