Create version compatible with TailwindCSS

[svelterust]

I'd love to have one version of PicoCSS which basically doesn't include the spacing, any of the classes and things like that. To me, PicoCSS + TailwindCSS is the perfect combination to quickly biuld stuff that looks good. It would be nice to have one version where I can import both and there's not any clash with TailwindCSS (with preflight set to false). Basically:

• Don't include any classes like container, grid etc.

[cboecking]

+1 - in concept, that is very interesting.

[svelterust]

I've thought it through, and basically what is needed for this is following:

1. Get rid of extra classes like container, grid etc., because TailwindCSS has better alternatives.
2. Make spacing of elements dependend on class, such as elements inside .spacing get default spacing, otherwise everything has no spacing. Like headers, paragraphs etc. So .spacing { ...spacing stuff }.

This is probably doable to make into a PostCSS option I'm guessing.

[svelterust]

Instead of .spacing I think .content is a better name.

[svelterust]

Actually I think this is more than enough, not necessary to create another variant. Just use .custom when you don't want spacing around tags:

@layer components {
  .custom {
    @apply [&>*]:m-0;
  }
}

I use classless variant with SvelteKit, the implicit containers don't work there which is perfect for my use-case.

[jaredcwhite]

My personal view of Tailwind is that it's one enormous anti-pattern (though very nicely documented), so wouldn't advocate for Pico to accommodate it in any specific way, but I could see the benefit of having an option to say for a particular element or tree of elements in the DOM: please "unstyle" this for me. Sort of a targeted CSS reset. There are probably uses for that beyond Tailwind per se.

Update: ha, after posting this I saw this: #604. So, yeah. 😄