[Feature Proposal] Generic utility generator

[dumconstantin]

Hi,

(Disclosure: I know this is not on the road map but it has potential for a future endeavor)

TLDR; Consider "forking" the project between the "Tailwind Framework" and the "Tailwind Generator"

As discussed in #102 there is a niche of Tailwind "power users" who wish to configure their build down to the syntax.

So after a few days of hacking the Tailwind core, I was able to get a 100% coverage version of Tachyons. By switching a "flavor" flag you can choose between a Tailwind or Tachyons build.

I've then successfully implemented this in a project written in Tachyons so I'm confident about this approach.

Why I took the trouble of doing this? Well it's manly due to the fragmented ecosystem that Tachyons and the other utility frameworks have which makes customization and extension cumbersome or downright impossible.

The programmatic approach that Tailwind took is a breath of fresh air and imho it's a convergence point for the Utility CSS™ paradigm.

Also other initiatives like following the development pipeline (using Purgecss for optimizing per-project build) means Tailwind is on the right path to establish the default workflow of UI development in the Utility CSS space.

So this feature proposal is about abstracting away the Taiwlind core in order to support extensive customization. At a glance this means:

• Defining a standard generator input, e.g:

  padding: {
    base: 'p',
    modifier: '_',
   sides: {
      base: 'p-',
      separator: '--',
      modifier: '-',
      list: {
        vertical: 'y',
        horizontal: 'x',
        top: 't',
        right: 'r',
        bottom: 'b',
        left: 'l'
      }
    }
  }
  // Generates:
  // p_1
  // p--x-1
  // p--x--t-2

• Categorize generators based on processing type (sizing, colors, etc)
• Add generators required for supporting extra / custom features that other utility frameworks have
• Develop a coverage + test suite
• Ship builds for Tahcyons, Basscss, Shedcss, Acss, Beard etc

So what does Tailwind have to gain from this?

Firstly, let's analyze a bit the landscape. Each utility framework with their respective community exist segregated from each other firstly technological and secondly ideological. Each invest time and effort in order to gain momentum or ensure integrity which eventually plateaus overall initiatives. Also, due to the nature of the Utilicy CSS approach, it's guaranteed that each framework will reach a 100% duplication in the end result.

So what if there was another way to go about this? What if someone would make the technological bridge across this community gap? This would most definitely free up everyone's time to focus on ideology and community building. In turn, increasing the velocity of the Utility CSS paradigm penetrating the main stream.

On top of this, a single, perfectly refined on-boarding setup makes the mainstream pick-up the technology easily and then naturally orienting to their respective ideology niche.

Jumping on this train, things like bootstrap or other frameworks can be rebuilt in the Utility CSS flavor further synchronizing the front end world - think Babel (but that's another book to be written).

So in this story, Tailwind would be the community bridge builder and ecosystem potentiator which translates to both prestige and a richer contributors pool.

Of course, this is more of a rant than a realistic plan as I have 0 experience in building communities but this is how I feel about Tailwind. Congratulation on everything you guys have done so far and if this feature proposal reaches the next step then kudos to everyone :)

(Btw, you can check out the Tachyons/Tailwind build here: https://github.com/dumconstantin/tailwindcss/tree/tachyons)

[adamwathan]

Like discussed in #331 I don't have plans to take things to this level any time soon, but it's an interesting idea and maybe something we can explore more down the road after at least 1.0 is released.

Going to close this for now as "no plans to implement" but I wouldn't be surprised if the plugin system we are planning on developing in the near future nudges the architecture of Tailwind closer to something like this, so let's just see what happens.

[ooloth]

@dumconstantin I'd love to use your Tachyons/Tailwind fork! For me, the combination of Tailwind's build process with the terse Tachyons class names I'm used to would be ideal.

While we wait for Tailwind plugins, would you be willing to provide instructions on how to install your fork and toggle the "flavor" flag?

[dumconstantin]

@ooloth i've setup a boilerplate project so you can get going with it: https://github.com/dumconstantin/webpack-tailwind-tachyons

Just:

git clone git@github.com:dumconstantin/webpack-tailwind-tachyons.git
cd webpack-tailwind-tachyons
npm install
npm start

Or if you want to include it in your project:

1. Basically you just need to install the dep:

   npm i dumconstantin/tailwindcss#tachyons

2. Add at the begning of you webpack.config file (or at your entry point) a env var:

   process.env.TAILWIND_FLAVOUR = 'tachyons'

3. Add your postcss setup for webpack:

   {
               test: /\.css/,
               use: [
                   'style-loader',
                   {
                       loader: 'css-loader',
                   },
                   {
                       loader: 'postcss-loader',
                       options: {
                         plugins: (loader) => ([
                           require('postcss-import'),
                           require('tailwindcss')(__dirname + '/tailwind.js'),
                         ])
                       }
                   }
               ]
           },

4. Copy-paste the default tailwind - tachyons configuration: https://github.com/dumconstantin/webpack-tailwind-tachyons/blob/master/tailwind.js

5. Extend the configuration and enjoy :)

[ Note ] I haven't yet merged with the latest tailwind version but so far I've been able to use this extended tachyons version in my projects and works just fine.

If you find some mishaps (tachyons classes that don't behave as they should) just open an issue here: https://github.com/dumconstantin/webpack-tailwind-tachyons/issues

[ooloth]

@dumconstantin Thank you!

[aarongeorge]

@adamwathan now that we're past 1.0 could we take a look at implementing this option of "flavors"?