Tailwind CSS常见问题处理

动态类名问题

因为tailwind默认是走的编译,所以不能很好识别动态命名的问题

所以如果有动态类名,要么就是用那种三元表达式,如果彻底没办法就要在tailwind配置中单独添加

safelist

https://tailwindcss.com/docs/content-configuration#safelisting-classes

jsxEavan.dev

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./pages/**/*.{html,js}', './components/**/*.{html,js}'],
  safelist: ['bg-red-500', 'text-3xl', 'lg:text-4xl'],
  // ...
}

样式冲突问题

因为css类名写在html标签上不具备优先级,只是在css文件中后写的可以覆盖先写的

所以当你写

jsxEavan.dev

<div className="bg-blue-100 bg-blue-200" />

此时就会碰运气,到底优先级如何

所以你这时候需要使用一个类库 tailwind-merge 去处理这种事情

jsxEavan.dev

import { twMerge } from 'tailwind-merge'

twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
// → 'hover:bg-dark-red p-3 bg-[#B91C1C]'

如何简写条件语句

非常项目vue中帮你把此类的操作全部处理了,但是在别的框架中可没有帮你手动处理,需要单独安装一个插件 clsx

jsxEavan.dev

import clsx from 'clsx'
// or
import { clsx } from 'clsx'

// Strings (variadic)
clsx('foo', true && 'bar', 'baz')
//=> 'foo bar baz'

// Objects
clsx({ foo: true, bar: false, baz: isTrue() })
//=> 'foo baz'

// Objects (variadic)
clsx({ foo: true }, { bar: false }, null, { '--foobar': 'hello' })
//=> 'foo --foobar'

// Arrays
clsx(['foo', 0, false, 'bar'])
//=> 'foo bar'

// Arrays (variadic)
clsx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]])
//=> 'foo bar baz hello there'

// Kitchen sink (with nesting)
clsx('foo', [1 && 'bar', { baz: false, bat: null }, ['hello', ['world']]], 'cya')
//=> 'foo bar hello world cya'

然后最好是两个联合起来使用,这个是shadcn默认自带的utils方法

jsxEavan.dev

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

关于类名排序混乱

当你的class越写越多的时候,后续进行维护就会变得很困难,这是很难避免的问题,所以我们只有去尽量优化,让你的class尽量规范化,这里有一个很好的prettier插件能帮你解决这个问题 prettier-plugin-tailwindcss

https://github.com/tailwindlabs/prettier-plugin-tailwindcss

bashEavan.dev

npm install -D prettier prettier-plugin-tailwindcss

jsxEavan.dev

//.prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"]
}

如何在不影响老项目样式的情况下集成tailwindcss

之前遇到一个老项目,那个老项目的css reset很不规范,然后我引入了tailwindcss,然后就发现很多样式都不一样了,譬如没有给*加上box-sizing:border-box等等,最关键的是原本有一些类和tailwindcss的类名重复了,导致样式冲突

为了解决这些问题

首先去除css的Preflight - Tailwind CSSPreflight - Tailwind CSSAn opinionated set of base styles for Tailwind projects.,然后在tailwindcss的配置文件中添加

jsxEavan.dev

module.exports = {
  corePlugins: {
    preflight: false,
  },
}

给tailwindcss添加一个前缀

jsxEavan.dev

module.exports = {
  prefix: 'tw-',
}