tailwind配置

tailwind.config.js

兼容PC与移动端

中文地址：https://tailwind.nodejs.cn/

• 初始化

npx tailwindcss init

• 需要安装@tailwindcss/forms

  yarn add @tailwindcss/forms

• 需要安装tailwindcss-rtl
  yarn add tailwindcss-rtl

module.exports = {
	content: ['./src/**/*.{js,jsx,ts,tsx}'],
	// darkMode: false,
	theme: {
		screens: {
			sm: '480px',
			md: '768px',
			lg: '1024px',
			xl: '1280px',
			'2xl': '1500px',
			'3xl': '1780px',
		},
		extend: {
			colors: {
				body: '#5A5A5A',
				heading: '#212121',
				input: '#1D1E1F',
				black: '#000',
				white: '#fff',
				linen: '#FBF1E9',
				linenSecondary: '#ECE7E3',
				olive: '#3D9970',
				maroon: '#B03060',
				brown: '#C7844B',
				placeholder: '#707070',
				borderBottom: '#f7f7f7',
				facebook: '#4267B2',
				facebookHover: '#395fad',
				google: '#4285F4',
				googleHover: '#307bf9',
				gray: {
					50: '#FBFBFB',
					100: '#F1F1F1',
					150: '#F4F4F4',
					200: '#F9F9F9',
					300: '#E6E6E6',
					350: '#E9ECEF',
					400: '#999999',
					500: '#D8D8D8',
					600: '#3A3A3A',
					700: '#292929',
					800: '#707070',
					900: '#343D48',
				},
			},
			fontSize: {
				// 'sm': '24px',
				// 'base': '36px',
				// 'lg': '40px',
				// 'xl': '54px',
				// '2xl': '60px',
				'10px': '.625rem',
			},
			spacing: {
				'430px': '430px',
				'450px': '450px',
				'500px': '500px',
				'64vh': '64vh',
			},
			minHeight: {
				'50px': '50px',
			},
			scale: {
				80: '0.8',
				85: '0.85',
				300: '3',
				400: '4',
			},
			animation: {
				shine: 'shine 1s',
			},
			keyframes: {
				shine: {
					'100%': { left: '125%' },
				},
			},
			backgroundImage: {
				'app-pattern': "url('/assets/images/app-pattern.png')",
			},
		},
		boxShadow: {
			cart: '0 3px 6px rgba(0,0,0,0.12)',
			product: '0 6px 12px rgba(0,0,0,.08)',
			listProduct: '0 2px 4px rgba(0,0,0,.08)',
			navigation: '0 3px 6px rgba(0, 0, 0, 0.16)',
			navigationReverse: '0 -3px 6px rgba(0, 0, 0, 0.16)',
			header: '0 2px 3px rgba(0, 0, 0, 0.08)',
			vendorCard: '1px 1px 4px rgba(0, 0, 0, 0.12)',
			vendorCardHover: '0 6px 18px rgba(0, 0, 0, 0.12)',
			subMenu: '1px 2px 3px rgba(0, 0, 0, 0.08)',
			bottomNavigation: '0 -2px 3px rgba(0, 0, 0, 0.06)',
			cookies: '0 -2px 3px rgba(0, 0, 0, 0.04)',
			avatar: '0px 15px 30px rgba(0, 0, 0, 0.16)',
		},
		fontFamily: {
			body: ["Microsoft Yahei"],
			satisfy: ["Microsoft Yahei"],
			segoe: ["Microsoft Yahei"],
		},
	},
	plugins: [
		require('@tailwindcss/forms')({
			strategy: 'class',
		}),
		require('tailwindcss-rtl'),
	],
};

在CSS中，通常使用rem（相对于根元素的字体大小）单位来设置字体大小或者元素尺寸，而使用px单位来表示绝对长度。在某些情况下，我们会使用px与rem单位之间的换算关系来进行设置。
在这种情况下，10px等于0.625rem是因为通常情况下浏览器默认的根元素字体大小为16px。由于rem是相对于根元素的字体大小来计算的，因此通过简单的计算，10px除以16px等于0.625rem。
这样可以方便地将像素单位转换成相对单位，以适应不同屏幕和字体大小的需求。例如，如果你想在某个元素中设置字体大小为10px的话，你可以使用0.625rem来实现相同的效果，并且这样做可以更好地适应不同的屏幕和设备。
基于此，设置fontSize: 10px等于0.625rem可以在移动端和响应式设计中更灵活地进行字体大小的适配。