在react脚手架中使用tailwind css

之晏
5,502 阅读5分钟

tailwind css 是什么

官方文档

无需离开您的HTML，即可快速建立现代网站。

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计 官网示例：

<figure class="md:flex bg-gray-100 rounded-xl p-8 md:p-0">
  <img class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="https://www.tailwindcss.cn/_next/static/media/sarah-dayan.a8ff3f1095a58085a82e3bb6aab12eb2.jpg" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-semibold">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-cyan-600">
        Sarah Dayan
      </div>
      <div class="text-gray-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

image.png

安装

 npm install -D tailwindcss@latest postcss@latest autoprefixer@latest 
 # or
 yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest #后面全部使用 yarn 安装与卸载依赖

因为tailwind依赖于postcss 8+，所以在出现报错 Error: PostCSS plugin tailwindcss requires PostCSS 8.时，可以安装兼容性postcss 7，也可以升级依赖 postcss 的工具，使其支持postcss 8+

 yarn remove tailwindcss postcss autoprefixer
 yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

create-react-app 4.0版本脚手架支持

create-react-app 5.0版本已支持tailwind，无需使用插件修改配置

1. customize-cra方法

yarn add -D customize-cra react-app-rewired

// package.json
...
"scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",

+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test"
  },

在根目录创建文件 config-overrides.js

// config-overrides.js
const path = require('path')
const {
  ...
  override,
  addPostcssPlugins
} = require('customize-cra')

module.exports = {
  webpack: override(
    ...
    addPostcssPlugins([require('tailwindcss'), require('autoprefixer')])
  )
}

2. craco方法

craco 全部配置

github官网

npm包

yarn add @craco/craco

// package.json
...
"scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",

+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test"
  },

在根目录创建文件 craco.config.js

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

创建配置文件 tailwind.config.js

# 生成最小化的tailwind配置文件， 使用默认配置
npx tailwindcss-cli init

#可以增加 `--full` 将全部默认配置显示
npx tailwindcss init --full

修改 purge 属性，来移除生产环境下没有使用到的样式声明

// tailwind.config.js

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  presets: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    screens: {},
    colors: {},
    fontFamily: {},
    ...
    extend: {
      screens: {},
      colors: {},
      fontFamily: {},
    },
  },
  variants: {
    backgroundColor: ['active'],
    // ...
    borderColor: ['focus-visible', 'first'],
    // ...
    textColor: ['visited'],
    extend: {},
  },
  plugins: [],
}

配置

  • perge： 数组，配置移除生产环境下没有使用到的样式声明，文件路径数组
    • 一般指向组件根目录
  • presets: 数组，预设，允许指定部分自定义配置，替代tailwind的默认配置
  • darkMode: 三个值，false | media | class, 深色模式、默认不开启，值为media时自动开启，为class时手动开启
  • theme: 对象，自定义各类名对应css样式，对应值为空时自动启用tailwind默认样式
    • extend属性可以给默认样式进行扩展（保持原有扩展）
  • variants: 数组，开启或添加其他效果，比如focus、hover、active、group-hover、disabled等
    • 自定义变体会覆盖默认变体，且变体的顺序是样式的优先级，如first对borderColor具有最高优先级
    • extend属性效果同上
  • plugins: 数组，插件，可以向tailwind注入插件，用于生成额外功能类、组件、变体等

create-react-app 脚手架 5.0

在5.0脚手架中可以直接使用tailwind v3.0

 yarn add -D tailwindcss postcss autoprefixer
 yarn tailwindcss init --full -p

同时，tailwind.config.js 有一个属性(purge)修改，其余配置属性没有改变

 module.exports = {
 -  purge: ['./src/**/*.{js,jsx,ts,tsx}'],
 +  content: ['./src/**/*.{js,jsx,ts,tsx}']
    ...
 }

在 css 中引入 tailwind

也可以是less、sass、scss，是全局样式就行

/* ./src/index.{css, less, sass, scss} */
@tailwind base;
@tailwind components;
@tailwind utilities;

在根组件引入

// ./src/index,tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

+  import './index.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

简单使用

宽度

w-{n} 可自定义

类名属性值
一般宽度
w-0width: 0px;
w-pxwidth: 1px;
w-0.5width: 0.125rem;
w-1width: 0.25rem;
......
最小宽度
min-w-0min-width: 0px;
min-w-fullmin-width: 100%;
min-w-minmin-width: min-content;
......
最大宽度
max-w-0max-width: 0rem;
max-w-nonemax-width: none;
......
 {/* 宽度为 1rem 的按钮 */}
 <button className="w-4">按钮</button>

高度

h-{n} 可自定义

类名属性值
一般高度
h-0height: 0px;
h-pxheight: 1px;
h-0.5height: 0.125rem;
h-1height: 0.25rem;
......
最小高度
min-h-0min-height: 0px;
min-h-fullmin-height: 100%;
......
最大高度
max-h-0max-height: 0px;
max-h-pxmax-height: 1px;
......
 {/* 背景颜色为黑色，高度为 0.5rem，最大高度为1rem的盒子 */}
 <div className="bg-black h-2 max-h-4">盒子 * 1000</div>

文本对齐

 <p className="text-left">Lorem ipsum dolor sit amet ...</p> {/* 左对齐 */}
 <p className="text-center">Lorem ipsum dolor sit amet ...</p> {/* 居中对齐 */}
 <p className="text-right">Lorem ipsum dolor sit amet ...</p> {/* 右对齐 */}

边距

内边距

p-{n} 四个方向的内边距

px-{n} 水平方向上的内边距

py-{n} 竖直方向上的内边距

pt-{n} -> padding-top

pr-{n} -> padding-right

pb-{n} -> padding-bottom

pl-{n} -> padding-left

 {/* padding: 1rem; */}
 <p className="p-4">Lorem ipsum dolor sit amet ...</p>
 ​
 {/* padding: 1rem 0.5rem 1rem 0.5rem; */}
 <p className="px-2 py-4">Lorem ipsum dolor sit amet ...</p>
 ​
 {/* padding-top: 1rem; */}
 <p className="pt-2">Lorem ipsum dolor sit amet ...</p>

外边距

m-{n} 四个方向的外边距

mx-{n} 水平方向上的外边距

my-{n} 竖直方向上的外边距

mt-{n} -> margin-top

mr-{n} -> margin-right

mb-{n} -> margin-bottom

ml-{n} -> margin-left

 {/* margin: 1rem; */}
 <p className="m-4">Lorem ipsum dolor sit amet ...</p>
 ​
 {/* margin: 1rem 0.5rem 1rem 0.5rem; */}
 <p className="mx-2 my-4">Lorem ipsum dolor sit amet ...</p>
 ​
 {/* margin-top: 1rem; */}
 <p className="mt-2">Lorem ipsum dolor sit amet ...</p>

定位

类名属性
staticposition: static;
fixedposition: fixed;
absoluteposition: absolute;
relativeposition: relative;
stickyposition: sticky;
 <div className="relative">
   <p>Relative parent</p>
   <div className="absolute bottom-0 left-0">
     <p>Absolute child</p>
   </div>
 </div>

image-20211220161810366.png

Flex

类名属性
flex-1flex: 1 1 0%;
flex-autoflex: 1 1 auto;
flex-initialflex: 0 1 auto;
flex-noneflex: none;
 <div className="flex bg-blue-100 w-96 h-64 items-center">
   <div className="flex-1 bg-blue-200 w-20 h-16">item 1</div>
   <div className="flex-1 bg-blue-300 w-20 h-16">item 2</div>
   <div className="flex-1 bg-blue-400 w-20 h-16">item 3</div>
 </div>

image-20211220162753332.png

VS Code 相关插件 - Tailwind CSS IntelliSense

0e4efe4e12167b01e654a32b889848cff76ba31e.png

与Bootstrap的区别

Bootstrap

Bootstrap 开箱提供了丰富的布局、组件和样式库，可以不做任何调整直接拿来使用，这在构建一些内部项目或者验证原型的时候非常方便，但是如果需要定制自定义的样式风格，则需要覆盖默认的样式属性，这可能会导致大量无效样式属性的加载。

Tailwind

Tailwind 则使用的是组合的方式实现所需样式，每一种样式对应着一个类名，而且可以完全自定义配置，实现一个精美的组件是通过多个类名的不同叠加，

avatar
文章
阅读
粉丝