将tailwindCSS默认配置单位rem换成px

最新推荐文章于 2025-05-09 08:51:56 发布

元元猿

最新推荐文章于 2025-05-09 08:51:56 发布

阅读量1.9k

点赞数 11

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签：前端 html css

本文链接：https://blog.youkuaiyun.com/qq_55050872/article/details/135271723

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何在tailwind.config.js中进行详细的像素级样式配置，包括内边距、外边距、圆角、宽度、高度、字体大小和行高等，并说明了未使用的类不会被打包到编译文件中的特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在tailwind.config.js文件中进行配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./js/**/*.{vue,js}"],
  theme: {
    // 内边距
    padding: Array.from({ length: 1000 }).reduce((map, _, index) => {
      map[index] = `${index}px`;
      return map;
    }, {}),
    // 外边距
    spacing: Array.from({ length: 1000 }).reduce((map, _, index) => {
      map[index] = `${index}px`;
      return map;
    }, {}),
    // 圆角
    borderRadius: Array.from({ length: 100 }).reduce((map, _, index) => {
      map[index] = `${index}px`;
      return map;
    }, {}),
    extend: {
      // 宽度
      width: Array.from({ length: 1000 }).reduce((map, _, index) => {
        map[index] = `${index}px`;
        return map;
      }, {}),
      // 高度
      height: Array.from({ length: 1000 }).reduce((map, _, index) => {
        map[index] = `${index}px`;
        return map;
      }, {}),
      // 字体大小
      fontSize: Array.from({ length: 100 }).reduce((map, _, index) => {
        map[index] = `${index}px`;
        return map;
      }, {}),
      // 行高
      lineHeight: Array.from({ length: 1000 }).reduce((map, _, index) => {
        map[index] = `${index}px`;
        return map;
      }, {}),
    },
  },
  plugins: [],
}