tailwindcss 配置项

tailwind.config.js

/** @type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme");

const spacing = Array.from({ length: 1500 }).reduce((map, _, index) => {
  map[index] = `${index}px`;
  return map;
}, {});

const opacity = Array.from({ length: 8 }).reduce((map, _, index) => {
  map[index + 1] = `${(index + 1) / 100}`;
  return map;
}, {});

const getNumSpacing = num =>
  Object.keys(spacing)
    .slice(0, num)
    .reduce((map, key) => {
      map[key] = spacing[key];
      return map;
    }, {});

export default {
  darkMode: "class",
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    spacing,
    extend: {
      fontSize: ({ theme }) => ({
        ...theme("spacing")
      }),
      colors: {
        "#333": "#333333",
        "#666": "#666666",
        "#2C2C2C": "#2C2C2C",
        "#676A6F": "#676A6F"
      },
      fontWeight: {
        400: "400",
        500: "500",
        600: "600"
      },
      borderRadius: getNumSpacing(20), // 取前 20 个值
      opacity, // 0.01 - 0.09 默认透明度为1
      lineHeight: getNumSpacing(25)
    },
    fontFamily: {
      sans: ["PingFang SC", ...defaultTheme.fontFamily.sans],
      ph: ["Alibaba PuHuiTi", "sans-serif"]
    },
    backgroundImage: theme => ({
      "btn-gradient": "linear-gradient(270deg, #2A72FF 0%, #3994FF 100%) !important"
    })
  },
  plugins: []
};

postcss.config.js

export default {
  plugins: {
    require("postcss-apply"),
    "postcss-import": {},
    "tailwindcss/nesting": {},
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {})
  }
};

.prettierrc.cjs

module.exports = {
  // 指定最大换行长度
  printWidth: 130,
  // 缩进制表符宽度 | 空格数
  tabWidth: 2,
  // 使用制表符而不是空格缩进行 (true：制表符，false：空格)
  useTabs: false,
  // 结尾不用分号 (true：有，false：没有)
  semi: true,
  // 使用单引号 (true：单引号，false：双引号)
  singleQuote: false,
  // 在对象字面量中决定是否将属性名用引号括起来 可选值 "<as-needed|consistent|preserve>"
  quoteProps: "as-needed",
  // 在JSX中使用单引号而不是双引号 (true：单引号，false：双引号)
  jsxSingleQuote: false,
  // 多行时尽可能打印尾随逗号 可选值"<none|es5|all>"
  trailingComma: "none",
  // 在对象，数组括号与文字之间加空格 "{ foo: bar }" (true：有，false：没有)
  bracketSpacing: true,
  // 将 > 多行元素放在最后一行的末尾，而不是单独放在下一行 (true：放末尾，false：单独一行)
  bracketSameLine: false,
  // (x) => {} 箭头函数参数只有一个时是否要有小括号 (avoid：省略括号，always：不省略括号)
  arrowParens: "avoid",
  // 指定要使用的解析器，不需要写文件开头的 @prettier
  requirePragma: false,
  // 可以在文件顶部插入一个特殊标记，指定该文件已使用 Prettier 格式化
  insertPragma: false,
  // 用于控制文本是否应该被换行以及如何进行换行
  proseWrap: "preserve",
  // 在html中空格是否是敏感的 "css" - 遵守 CSS 显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的
  htmlWhitespaceSensitivity: "css",
  // 控制在 Vue 单文件组件中 <script> 和 <style> 标签内的代码缩进方式
  vueIndentScriptAndStyle: false,
  // 换行符使用 lf 结尾是 可选值 "<auto|lf|crlf|cr>"
  endOfLine: "auto",
  // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码 (rangeStart：开始，rangeEnd：结束)
  rangeStart: 0,
  rangeEnd: Infinity
};