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: {
      // 基础色板
      'primary': '#327BF9', // 品牌色
      'primary-light': '#EBF4FF',
      'warn': '#FD7F2C',
      'warn-light':  '#FFF2E9',
      'success':  '#31BE59',
      'success-light':  '#EAF8EE',
      'error':  '#EE4949',
      'error-light':  '#FDEDED',
      'red': '#FF4747',
      // 中性色板
      'gray-1': 'rgba(17, 17, 17, 0.03)', // 未选中按钮背景
      'gray-2': 'rgba(17, 17, 17, 0.05)', // 骨架图卡片模块
      'gray-3': 'rgba(17, 17, 17, 0.25)', // 分割线，未编辑边框，禁用文本
      'gray-4': 'rgba(17, 17, 17, 0.45)', // 辅助文本，输入文本，仅展示，暗文本
      'gray-5': 'rgba(17, 17, 17, 0.65)', // 副标题，描述文本
      'gray-6': 'rgba(17, 17, 17, 0.85)', // 正文
      'gray-7': 'rgba(17, 17, 17, 1)', // 特殊标题，主标题，正文

      // deprecated
      'white': '#FFFFFF',
      'white-70': 'rgba(255, 255, 255, 0.7)',
      'primary-10': 'rgba(49, 124, 250, 0.1)',
      'black': '#000000',
      'dark': '#111A34;',
      'black-3': '#333333',
      'black-6': '#666666',
      'black-9': '#999999',
      'black-25': 'rgba(0, 0, 0, 0.25)',
      'black-45': 'rgba(0, 0, 0, 0.45)',
      'black-50': 'rgba(0, 0, 0, 0.5)',
      'black-60': 'rgba(0, 0, 0, 0.6)',
      'black-65': 'rgba(0, 0, 0, 0.65)',
      'title': '#111111',
      'text': 'rgba(17, 17, 17, 0.85)',
      'harsh': '#F94F17',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#FD561F',

      'green': '#31BE59',
      'yellow': '#EE9E49',
      'gray': '#f6f6f6',
      'gray-page': '#f6f6f6',
      'gray-dark': '#273444',
      'gray-f8': '#F8F8F8',


      'gray-sub': 'rgba(17, 17, 17, 0.75)',
      'gray-light': 'rgba(17, 17, 17, 0.08)',
      'gray-fafafa': '#fafafa',
    },
    fontSize: {
      '11': '11px',
      ...configFontSize,
    },
    extend: {
      fontFamily: {
        pingfangSCMedium: ['PingFangSC-Medium'],
        pingfangSCSemibold: ['PingFangSC-Semibold'],
      },
      lineHeight: {
        '0': '0px',
        '1': '1px',
        ...configLineHeight,
      },
      spacing: configSpace,
      borderRadius: {
        DEFAULT: '8px',
        ...configBorderRadius,
        'full': '9999px',
      }
    }
  }
}