tailwindcss 开发详解

前言

less和sass 的出现让css也具有逻辑，变量、继承、运算、函数等；在编程语言中的名词也能运用到css中。但是随着技术的迭代发展 tailwindcss、unocss等 “无css” 的思想逐渐的侵入前端现有的开发领域。

使用 tailwindcss

1、安装

npm i tailwindcss postcss autoprefixer -D

2、初始化 tailwind.config.js 文件

npx tailwindcss init     

/** @type {import('tailwindcss').Config} */  
export default {  
  content: [],  
  theme: {  
    extend: {},  
  },  
  plugins: [],  
}

修改content，指定哪些文件需要使用tailwindcss。没有此配置，也许就不生效。

// 我使用的cra 来创建的项目，所以配置了jsx和tsx。如果是vue，那么把 vue 添加进去就可以了。
 content: [
    './src/**/*.{js,ts,jsx,tsx}'
  ],

3、在main.js 或者 index.js 入口文件中 引入 import './tailwind.css'。
tailwind.css 文件里面就是以下三行代码

@tailwind base;
@tailwind components;
@tailwind utilities;

• @tailwind base; 基础的样式规则
• @tailwind components; 组件的样式规则
• @tailwind utilities; 功能模块规则
  

4、vscode 插件实现智能提示 - Tailwind CSS IntelliSense

5、基础使用

<div className='w-[100px] h-[100px] bg-[red] text-center'>我是一个框</div>

6、 hover使用

<div className='hover:bg-red-50'>我是一个框</div>

7、响应式布局

<div className='md:bg-[blue] sm:bg-[red] lg:bg-[green]'>我是一个框</div>

实用工具

1、clsx
与 classNames 效果类似，包体积比 classNames更小

import clsx from 'clsx';

export default function App() {

  const text = 'text-[32px] text-[green]'
  
  const box = 'size-[100px] bg-[red]'
  
  return (
    <div className="App">
        <div className={clsx(text, box)}>我是一个框</div>
    </div>
  );
}

2、twMerge
在css中，经常出现的一个问题就是样式权重。在css中的解决方案是 !important 。 在 tailwindcss 中使用 twMerge；前后有相同属性的样式，会把前面的样式删除掉就没有样式权重的问题了。

import clsx from 'clsx';

import {twMerge} from 'tailwind-merge'

export default function App() {

  const text = 'text-[32px] text-[green]'
  
  const box = 'size-[100px] bg-[red]'
  // size-[100px] 和 size-[200px]相同，那么 size-[100px] 就会被删除。位置相反则 size-[200px]被删除
  const v = twMerge(clsx(text, box, 'size-[200px]'))
  
  return (
    <div className="App">
        <div className={v}>我是一个框</div>
    </div>
  );
}

高级特性theme

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 用于指定哪些页面的文件，会使用tailwindcss
  content: [
    './src/**/*.{vue,js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {
      padding: {
        '1': '30px'
      },
    },
  },
}

配置后 p-1 表示的padding就是30px。

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 用于指定哪些页面的文件，会使用tailwindcss
  content: [
    './src/**/*.{vue,js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {
      padding: {
        '1': '30px'
      },
      backgroundColor: {
        heise: {
          0: 'rgba(0, 0, 0, 0)',
          1: 'rgba(0, 0, 0, 0.1)',
          2: 'rgba(0, 0, 0, 0.2)',
          3: 'rgba(0, 0, 0, 0.3)',
          4: 'rgba(0, 0, 0, 0.4)',
        },
      },
    },
  },
}

配置后，bg-heise-* 也能够正常使用了。

padding, backgroundColor。padding表示自定义 边距，对应的就是 p-；backgroundColor自定义背景颜色，对应的就是bg-。具体的对应关系，查询官方文档

高级特性 plugin

const plugin = require('tailwindcss/plugin')

/** @type {import('tailwindcss').Config} */

module.exports = {
  // 用于指定哪些页面的文件，会使用tailwindcss
  content: [
    './src/**/*.{vue,js,ts,jsx,tsx}'
  ],
 
  plugins: [
    plugin(function({ addBase}) {
      // 添加基础样式的函数
      addBase({
        'button': { color: 'red', border: '1px solid black'}
      })
    })
  ],
}

<button>我是一个按钮</button>

此配置是往@tailwind base; 模块中注入默认样式。我们可以根据此配置来重置标签在浏览器上的默认样式，例如p , input, hr 等有自己样式的标签。也可以为单独的标签自定义样式。

const plugin = require('tailwindcss/plugin')

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 用于指定哪些页面的文件，会使用tailwindcss fast-glob 
  content: [
    './src/**/*.{vue,js,ts,jsx,tsx}'
  ],
  
  plugins: [
    plugin(function({ addBase, addComponents ,theme, addUtilities }) {
      // 用于添加自定义组件样式的函数
      addComponents({
        '.card': {
          display: 'inline-block',
          padding: '1rem',
          border: '1px solid',
          borderRadius: '4px',
          borderColor: theme('colors.red.400'),
          margin: '1rem'
        }
      })
    })
  ],
}

<div className='card'>
  <button>自定义button默认样式</button>
</div>

此配置是生成一个card 样式 在 @tailwind components; 配置里面。可以直接使用

const plugin = require('tailwindcss/plugin')

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 用于指定哪些页面的文件，会使用tailwindcss fast-glob 
  content: [
    './src/**/*.{vue,js,ts,jsx,tsx}'
  ],
  
  plugins: [
    plugin(function({ addBase, addComponents ,theme, addUtilities }) {
      // 用于添加自定义工具类的函数
      addUtilities({
        '.center': {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center'
         }
        }
      })
    })
  ],
}

<div className='center'>
  <div className='card'>
    <button>自定义button默认样式</button>
  </div>
</div>

center 是一个自定义工具类。有需要用到flex 居中的，使用它就行了。

在自定义组件中的属性中使用tailwindcss 智能提示

在vscode 的插件设置页面设置需要智能提示的选项

"tailwindCSS.experimental.classRegex": [
        "(?:styleClass)(?:From|To)?=\\s*(?:\"|'|{`)([^(?
    ]

styleClass 是组件里面的自定义class。正常没有配置的情况是没有 智能提示的。配置以后重启编辑器就会生效