阅读 865

Styled Components和Tailwind配置以及使用方法

这是一篇主要介绍Tailwind配置以及使用方法的文章,本文总结了Tailwind类名的十大命名规律,虽然有相应的代码提示工具,但是笔者希望能进一步减轻初学者的记忆负担,同时引入了styled Components结合使用。

Part1 Styled Components

1 介绍

Styled Components 是一个常用的 CSS in JS 类库。和所有同类型的类库一样,通过 js 解决了原生 css 所不具备的能力,比如变量、循环、函数等。诸如 sass&less 等预处理可以解决部分 css 的局限性,但还是要学习新的语法,而且需要对其编译,其复杂的 webpack 配置也总是让开发者抵触,而 Styled Components 很好的解决了这些问题。

2 安装和使用

安装方法

yarn add styled-components
复制代码

使用方法

import styled from 'Styled Components';
const Wrapper = styled.section`
  margin: 0 auto;
  width: 300px;
  text-align: center;
`;
const Button = styled.button`
  width: 100px;
  color: white;
  background: skyblue;
`;
render(
  <Wrapper>
    <Button>Hello World</Button>
  </Wrapper>
);
复制代码

上述的代码片段展示了 React 项目中使用 Styled Components,定义了 Wrapper 和 Button 两个组件,包含了 html 结构和对应的 css 样式,从而将样式和组件之间的 class 映射关系移除。
具体使用细节:segmentfault.com/a/119000001…

3 提示插件

安装vscode-Styled Components即可。

Part2 Tailwind

1 Tailwind介绍

先来看下官网的介绍:

Tailwind CSS 是一个高度可定制的基础层 CSS 框架,它为您提供了构建定制化设计所需的所有构建块,而无需重新覆盖任何内建于框架中的设计风格。

它不同于Bootstrap等前端ui库,提供已经写好的组件。更像是之前的原子化css, 将css属性颗粒化,生成对应的功能class。相较原子css它还支持伪类、响应式,并且可高度自定义。

2 Tailwind的配置和使用

配置方法
第一步:首先生成tailwind.config.js文件

npx tailwindcss init
复制代码

第二步:在tailwind.config.js配置项目的基础样式(会默认覆盖tailwind的prefight)

module.exports = {
  important: true,
  corePlugins: {
    preflight: false, // 禁用tailwind的预设样式
  },
  variants: {
    extend: {
      backgroundColor: ['checked'],
      borderColor: ['checked'],
    },
  },
  theme: {
    extend: {
      // 设置font-size,第二个数据是行高,用法:text-size12,text-base
      fontSize: {
        base: '12px',
        12: '12px',
        14: '14px',
        16: '16px',
        18: '18px',
        20: '20px',
        24: '24px',
      },
      // 设置font-family,用法 font-normal
      fontFamily: {
        normal: ['Proxima Nova', 'PingFangSC', 'sans-serif'],
        semibold: ['Proxima Nova Semibold', 'PingFangSC', 'sans-serif'],
        bold: ['Proxima Nova Bold', 'PingFangSC', 'sans-serif'],
      },
      // 设置line-height,用法:leading-18
      lineHeight: {
        base: '21px',
        18: '18px',
        21: '21px',
        24: '24px',
        27: '27px',
        30: '30px',
      },
      // 设置font-weight,用法:font-bold
      fontWeight: {
        regular: '400',
        semibold: '600',
        bold: '700',
      },
      // 设置颜色,用法:font-gray-20 / bg-brand / border-gray-border
      colors: {
        transparent: 'transparent',
        current: 'currentColor',
        black: '#000',
        white: '#fff', // 灰度/白色
        red: '#ff6453',
        // 这三个一般用于文字颜色
        grey: {
          default: '#242f57',
          10: '#191d32', // 灰度/一级文字
          20: '#474c66', // 灰度/二级文字、次级文字按钮
          30: '#777d99', // 灰度/三级文字、icon
          40: '#b8bbcc',
          50: '#d9dbe5',
          60: '#eaecf6',
          70: '#f6f6fb',
          80: '#fafafd',
          300: '#b8bbcc',
          500: '#eaecf6',
          700: '#fafafd',
        },
        // 品牌色
        brand: {
          default: '#0080ff',
          10: '#369afe',
          20: '#67b3fe',
          30: '#3088e0',
          40: '#a0d0ff',
          50: '#e6f3ff',
          60: '#f4faff',
          A100: '#369afe',
        },
      },
      // 用于设置边距,用法:px-2 / my-3
      spacing: {
        default: '1px',
        1: '1px',
        2: '2px',
        3: '3px',
        4: '4px',
        6: '6px',
        8: '8px',
        12: '12px',
        14: '14px',
        16: '16px',
        18: '18px',
        20: '20px',
        24: '24px',
        28: '28px',
        32: '32px',
        36: '36px',
        40: '40px',
        48: '48px',
        64: '64px',
        72: '72px',
        74: '74px',
        auto: 'auto',
      },
      // borderRadius,用法:rounded, rounded-md
      borderRadius: {},
      // borderWidth,用法:
      borderWidth: {
        default: '1px',
      },
      screens: {
        default: '1280px',
      },
    },
  },
};
复制代码

第三步:在config.js中引入tailwind.config.js

const {theme,important,corePlugins} = require('../tailwind.config');
const getBaseConfig = moduleName => {
  return {
    source: {
      ...
      designSystem: theme //添加配置
    },
    tools:{
    tailwind: {
        important,        //其他配置类似
         corePlugins,
        purge: {          //treeshake掉不需要的tailwindcss
          enabled: isProd,   
          content: ['./src/**/*'], //对应每个模块下的src文件夹
          //layers: ['utilities'], 
        },
      },
      styledComponents: {
        pure: true,
        displayName: true,
        ssr: false,
        transplitTemplateLiterals: true,
      },
      ...
    }
 }
复制代码

使用方法

在需要使用Tailwind的文件下导入tailwind.css即可,它主要有3个模块
• base:css reset,重置默认属性
• components:一些组件样式
• utilities:工具类,也就是最常用的样式封装
方法一:

//Example.jsx:
import React from 'react';
import 'tailwindcss/tailwind.css'; // 全部导入
复制代码

方法二:

import React from 'react';
import 'tailwindcss/base.css'; // 导入base部分
import 'tailwindcss/components.css'; // 导入components部分
import 'tailwindcss/utilities.css'; // 导入utilities部分
复制代码

在接下来就可以直接使用Tailwind的css类了,类名虽多,但是比较有规律
具体使用方法:

1. 颜色 类名= 使用目标+颜色+权重

一般都把颜色作为背景色、文字颜色或者边框颜色。举个🌰,颜色green:

文字颜色: text-green  
背景颜色: bg-green  
边框颜色1: border-green      //default,不需要数字描述  
边框颜色2: border-green-700  //数字表示颜色的深浅,越大颜色越深  
复制代码

2. 文本 "text-"

image.png 文本颜色、文本装饰、大小写转换和溢出样式 见:docs.tailwindchina.com/docs/text-c…

3. 字体 "font-"

字体类型 "font-"+{type} image.png

字体粗细 "font-"+{weight} image.png

4. 行高 "leading-"+{size}

image.png 5. 背景 "bg-"

<div class="bg-purple-600 bg-opacity-100"></div>
<div class="bg-purple-600 bg-opacity-75"></div>
复制代码

背景颜色、背景图片位置等见: docs.tailwindchina.com/docs/backgr…

6. 边框 "rounded-"或"border-"

"rounded-"设置边框的圆角样式,"border-"设置边框颜色、粗细、边框类型等

<div class="rounded-full py-3 px-6">Pill Shape</div> //rounded-full=border-raduis:9999px
<div class="rounded-full h-24 w-24 flex items-center justify-center...">Circle</div>
<div class="border-4 border-light-blue-500 border-opacity-100"></div>
复制代码

7. 边距 "p-" "m-"

内边距padding: 使用p{t|r|b|l|x|y}-{size}功能类控制元素一侧的内边距。size是tailwind.config.js中配置的spacing对象的键。
image.png 外边距margin: 使用 m{t|r|b|l|x|y}-{size},用法同padding

8. 布局

8.1 display:元素显示类型
image.png 其他样式:docs.tailwindchina.com/docs/displa…

8.2 Flex "flex-" image.png

<div class="flex">
  <div class="flex-1">1</div>
  <div class="flex-1">2</div>
  <div class="flex-1 hidden">3</div>
</div>
复制代码

其他对齐方式:docs.tailwindchina.com/docs/justif…

box-sizing :控制浏览器如何计算元素的总大小的功能类。 image.png

9. 伪类 { hover: | focus: | checked: |active: | visited: |disabled: } + 功能类

并不是所有功能类都可以放在伪类的后面,只有tailwind文档规定的才可使用,如果需要在tailwind的配置文件中配置variants选项。

//hover active
<button class="bg-red-500 hover:bg-red-700 active:bg-purple-500 ">
  Hover me
</button>
//disabled
<button class="disabled:opacity-50">
  Submit
</button>
//checked
<input type="checkbox" class="appearance-none checked:bg-blue-600">
复制代码

10. 其他

tailwind2.0有暗黑模式和浅色模式的转换方法,另外taliwind.config.js的配置可丰富tailwindcss的使用功能。

3 提示插件

安装 Tailwind CSS IntelliSense 插件后,智能代码提示,就不用担心自己记不住tailwind的属性类了。

Tailwind 和Styled components的结合

考虑到tailwindcss不可能囊括我们项目开发中所有的样式代码。

  1. 比如一些魔法数值(例如元素宽固定260,等等)。
  2. 或者我们使用类第三方ui库,需要更改其样式。

这些用tailwindcss去设置就不那么方便了,这个时候我们就需要借助styled-component来进行样式编写来。

import 'tailwindcss/tailwind.css';
import styled from 'styled-components';

const Wrapper = styled.div.attrs<{active: boolean}>({
  className: 'bg-chartbox-dark',
})`
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
`;
复制代码
文章分类
前端
文章标签