TailWindCSS超级Config

Question

因此，我想做一个TailWindCSS超级Config，在其中我有每一个高度分数- 12，相同的高度屏幕和字体大小，和许多颜色。

我知道TailWindCSS提供了一个很好的默认配置，但我希望它更大、更好。FileSize不是CSS的问题，它将被清除，在使用了PurgeCSS一段时间之后，我相信它将只包含所需的内容。拥有一个大型的StyleSheet确实意味着一些开发人员可能会做得太过分，开始过度使用类，但是我个人认为这在我的公司内不会是一个问题，我仍然希望有一个大的配置。我想要自动生成配置，这样我就可以生成1/2、2/3、5/5等，而不必手动将它们输入配置中，此外，我希望每个属性都有不同的版本，从而使end CSS更大！

简而言之，我想要一种自动生成某些配置的方法，我想知道正确的顺序来声明配置(EG:高度、宽度、框影等等)。

谢谢贾斯汀。

Answer 1

因此，我的调查结果就是使用Javascript的本地功能自动生成配置的部分，从而节省了我编写配置行的时间。

​

myVariants = {};

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

console.log(myVariants);

​

有更多的你可以做的，使你的配置更自动化了！

Answer 2

您提到的所有内容都可以通过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',
   }
  }
 }
}