TailWindCSS 超级配置

Posted 2023-03-07

【中文标题】TailWindCSS 超级配置

【英文标题】：TailWindCSS Super Config

【发布时间】：2020-03-17 11:14:30

【问题描述】：

所以我想制作一个 ，其中每个高度分数最多为 12，高度屏幕和字体大小相同，还有很多颜色。

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

总之，我想要一种自动生成一些配置的方法，我想知道声明配置的正确顺序（例如：高度、宽度、框阴影等）。

谢谢，贾斯汀。

【参考方案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',
   
  
 

【讨论】：

我知道这是一个迟到的回复，但是阅读我原来的问题这并不能完全解决它，我希望自动生成配置。幸运的是，由于配置只是 JS，我们可以很容易地解决这个问题。我将发布另一个答案，涵盖我所做的事情，但是谢谢，祝你有美好的一天！

【参考方案2】：

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

myVariants = ;

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

console.log(myVariants);

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