Add @prefix at-rule for prefixing classes

[adamwathan]

This PR adds a new custom @prefix at-rule which works as a decorator for prefixing any nested class definitions:

@prefix 'tw-' {
  @tailwind utilities;
}

This makes it easy to generate all of Tailwind's utilities with a user-provided prefix to avoid collisions with any existing CSS they are using

[ghost]

I love this idea, this would also close #92!

Also, why use an at-rule rather than a configuration option?

[regularlabs]

Maybe have both?
So a general prefix configuration option too.
If you set the configuration prefix option to foo- an then wrap stuff in @prefix 'bar-' {}, the classmames would become foo-bar-....

[adamwathan]

Also, why use an at-rule rather than a configuration option?

Right now the config file doesn't contain any real "settings" or anything so to speak; it's more of a style guide or a definition of your design system.

Adding this there would make it the first time we've added that sort of configuration to that file and I'm not convinced I want to start mixing those two types of configuration in the same place.

Open to discussing it though; it would likely affect #99 as well, and any other proposals about "settings" like this, like tailwindlabs/discuss#27.

[regularlabs]

Mixing the style stuff with possible setting might indeed not be a good idea.
Solution could be to have them in a separate (optional) file.
Once you have the mechanism to control stuff with settings, you can think of all sorts of cool stuff to put in there in the future.

[regularlabs]

A different setting could be to control the format of the responsive prefixes (like mentioned in tailwindlabs/discuss#27), but also to choose whether to use that as a prefix or suffix.

Maybe settings to control LTR/RTL stuff.

[adamwathan]

After a bunch of discussion I think we're going to do this in the config file. Gonna let this hang open until we get that implemented though.

[adamwathan]

Closing this in favor of the config-based approach in #183.