CODEWITHSUNDEEP
csspostcsstailwind-css
Justin
Justin

Reputation: 170

TailWindCSS Super Config

So I want to make a TailWindCSS Super Config in which I have every height fraction up-to 12, same for height screen and font size, and a lot of colours.

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!


In Short, I would like a way to generate some of the config automatically, and I want to know the correct order to declare the config (EG: height, width, box shadow etc).

Thanks, Justin.

Upvotes: 0

Views: 287

Answers (2)

Justin
Justin

Reputation: 170

So, the result of my investigations is just to use the native ability of Javascript to generate parts of the config automatically, saving me time writing out config lines.

myVariants = {};

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

console.log(myVariants);

There is much more you can do to make your config even more automated too!

Upvotes: 0

Stavros
Stavros

Reputation: 831

Everything that you mentioned you can do it easily with the default config file that TailwindCSS gives you

This is the beauty of TailwindCSS, easy configuration, unlimited choices

Try https://tailwindcss.com/docs/configuration

Example:

// 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',
   }
  }
 }
}

Upvotes: 1

Related Questions