Split up Tailwind configuration using presets

[robdekort]

Currently all the Tailwind (TW) configuration is in one big file. I always thought this was nice, because that way you don't have to add and keep track of multiple .scss files like we had to in the past. However the file grew bigger and complex. On top of that some of Peak's utilities might be intimidating to new users as well.

While reading up on TW 1.9 I stumbled across the concept of presets. This basically gives us a nice way to split up the config files. That way you can just assume stuff works but never have to be confronted with the configuration of Peaks utilities and components. You just use them.

For this draft PR I settled for the following files:

• tailwind.config.js: The base TW config file refering the following ones:
• tailwind.config.typography.js: The TW typography plugin config.
• tailwind.config.forms.js: The TW form plugin config.
• tailwind.config.peak.js: All Peak's configuration, utilities and components.
• tailwind.config.site.js: Everything you need for your current site (theming).

With this setup you probably only ever edit the forms, typography and site config files. Those three files just contain your current projects configuration so it make more sense as it's your own. This seems more comprehensible to me. You probably also rarely have to add and keep track of added config files so that's a not an issue anymore.

Another benefit is that it's now easier to opt out of TW Typography and/or TW Forms if you don't want to use those.

What do you think?

[sjclark]

What do you think?

Love it, great idea! 👍

[philipboomy]

I went from one file CSS to TW so I loved the small config file however lately that config file has grown and its difficult to find the beginning and end of extend, plugins, etc in the file. So with that in mind I think this is a great idea.

[robdekort]

Good to hear this might help. Any ideas on how the configuration bits should be documented?