bluenote/tailwind.config.js

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

let configFontSize = {}
let configLineHeight = {}
for(let i=10;i<=64; i+=2){
  configFontSize[i] = [`${i}px`, `${i}px`]
  configLineHeight[i] = `${i}px`
}
let configSpace = {}
for(let i=2;i<=200; i+=2){
  configSpace[i] = `${i}px`
}
let configBorderRadius = {}
for(let i=2;i<=50; i+=2){
  configBorderRadius[i] = `${i}px`
}
module.exports = {
  // 这里给出了一份 taro 通用示例，具体要根据你自己项目的目录结构进行配置
  // 比如你使用 vue3 项目，你就需要把 vue 这个格式也包括进来
  // 不在 content glob表达式中包括的文件，在里面编写tailwindcss class，是不会生成对应的css工具类的
  content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx}'],
  // 其他配置项 ...
  corePlugins: {
    // 小程序不需要 preflight，因为这主要是给 h5 的，如果你要同时开发多端，你应该使用 process.env.TARO_ENV 环境变量来控制它
    preflight: false,
  },

  theme: {
    colors: {
      'white': '#FFFFFF',
      'primary': '#317CFA',
      'primary-10': 'rgba(49, 124, 250, 0.1)',
      'black': '#000000',
      'black-3': '#333333',
      'black-6': '#666666',
      'black-9': '#999999',
      'harsh': '#F94F17',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#FD561F',
      'red': '#EE4949',
      'green': '#31BE59',
      'yellow': '#EE9E49',
      'gray': '#f6f6f6',
      'gray-page': '#f6f6f6',
      'gray-dark': '#273444',
      'gray-f8': '#F8F8F8',
      'black-light': 'rgba(0, 0, 0, 0.45)',
      'gray-25': 'rgba(0, 0, 0, 0.25)',
      'gray-45': 'rgba(0, 0, 0, 0.45)',
      'gray-65': 'rgba(0, 0, 0, 0.65)',
      'gray-sub': 'rgba(0, 0, 0, 0.75)',
      'gray-light': 'rgba(0, 0, 0, 0.08)',
      'gray-2': 'rgba(0, 0, 0, 0.02)',
      'gray-3': 'rgba(0, 0, 0, 0.03)',
      'gray-4': 'rgba(0, 0, 0, 0.04)',
      'gray-fafafa': '#fafafa',
    },
    fontSize: {
      '11': '11px',
      ...configFontSize,
    },
    extend: {
      lineHeight: {
        '0': '0px',
        ...configLineHeight,
      },
      spacing: configSpace,
      borderRadius: {
        DEFAULT: '8px',
        ...configBorderRadius,
        'full': '9999px',
      }
    }
  }
}