Question

因此，我想制作一个TailWindCSS Super Config，其中每个高度分数都高达12，高度屏幕和字体大小相同，颜色也很多。

我知道TailWindCSS提供了很好的默认配置，但我希望它更大，更好。 FileSize对CSS来说不是问题，它将与PurgeCSS一起使用一段时间后，将被清除，我有信心它只会包含所需的内容。

拥有较大的StyleSheet确实意味着某些开发人员可能将其过度使用并开始过度使用类，但是我个人认为这对我公司而言不是问题，并且我仍然希望拥有较大的配置。

我想自动生成配置，这样就可以生成1 / 2、2 / 3、5 / 5等，而无需手动将它们输入到配置中，并且我希望每个属性都有每个变体，结束CSS更大！

简而言之，我想要一种自动生成一些配置的方法，并且我想知道声明配置的正确顺序（例如：高度，宽度，盒子阴影等）。

谢谢，贾斯汀。

Answer 1

您提到的所有内容都可以使用TailwindCSS为您提供的默认配置文件轻松完成

这是TailwindCSS的美丽之处，易于配置，选择无限

尝试https://tailwindcss.com/docs/configuration

示例：

// tailwind.config.js
module.exports = {
 theme: { 
  extend: {
   colors: {
    'lollipop': {
       100: '#FFFFEE',
       200: '#FFFFD5',
       300: '#FFFFBB',
       400: '#FFFE88',
       500: '#FFFE55',
       600: '#E6E54D',
       700: '#999833',
       800: '#737226',
       900: '#4D4C1A',
    },
    'lola': {
       100: '#FCFBFC',
       200: '#F8F4F7',
       300: '#F4EDF1',
       400: '#EBE0E7',
       500: '#E3D3DD',
       600: '#CCBEC7',
       700: '#887F85',
       800: '#665F63',
       900: '#443F42',
    }
   },
   spacing: {
    '96': '24rem',
    '128': '32rem',
    '254': '64rem',
   }
  }
 }
}

Answer 2

所以，我调查的结果只是利用Javascript的原生能力自动生成部分配置，节省了我写配置行的时间。

myVariants = {};

for(let x = 1; x < 12; x++)
  myVariants[x + "/12"] = (8.33333 * x) + "%";

console.log(myVariants);

您还可以做更多的事情来使您的配置更加自动化！

TailWindCSS超级配置

2 个答案: