TailWindCSS 超级配置

Question

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

I know that TailWindCSS gives a pretty good default config, but I want it bigger, better. FileSize is not an issue for the CSS and it is going to be Purged, after working with PurgeCSS for a little while, I feel confident that it will only include what is needed.

Having a large StyleSheet does mean that some developers may take it too far and start to overuse classes, however I personally feel that this will not be an issue within my company, and I would still like to have a large config.

I want to automatically generate the config so that I can have the 1/2, 2/3, 5/5 etc generated without me having to enter them manually into the config, along with this I want every variant for every attribute, making the end CSS even bigger!

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

谢谢，贾斯汀。

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 超级配置

TailWindCSS Super Config

css

postcss

tailwind-css