Add "prefix" and "important" options to config

[adamwathan]

This could've been two separate PRs but it's really just the consolidation of #99 and #100 but moved into the config file instead of being made available as at-rules.

This PR adds support for a new options key in the config file, with two options so far:

{
    // ...
    options: {
        prefix: 'tw-', // Defaults to ''
        important: true, // Default to false
    }
}

Prefix

The prefix option causes all of Tailwind's utilities to be generated with the given prefix.

This is (shockingly) more complex than it sounds, so there's a few rules worth understanding.

1. The prefix is added to the beginning of the utility name, not the full class name.

   This means that if you set a prefix of tw-, you'll get utilities that look like this:

   .tw-text-blue { ... }
   .hover:tw-text-blue { ... }
   .sm:tw-text-blue { ... }
   .md:tw-text-blue { ... }
   .lg:tw-text-blue { ... }
   .xl:tw-text-blue { ... }

   ...not like this:

   .tw-text-blue { ... }
   .tw-hover:text-blue { ... }
   .tw-sm:text-blue { ... }
   .tw-md:text-blue { ... }
   .tw-lg:text-blue { ... }
   .tw-xl:text-blue { ... }

   This may seem counter-intuitive at first, keep reading.

2. Your own classes that Tailwind touches with features like @responsive do not adopt this prefix.

   For example, this custom class wrapped in @responsive:

   @responsive {
       .foo { color: blue }
   }

   ...will generate this code:

   .foo { color: blue }
   @media (min-width: 576px) {
       .sm:foo { color: blue }
   }
   @media (min-width: 768px) {
       .md:foo { color: blue }
   }
   @media (min-width: 992px) {
       .lg:foo { color: blue }
   }
   @media (min-width: 1200px) {
       .xl:foo { color: blue }
   }

   ...not this code:

   .tw-foo { color: blue }
   @media (min-width: 576px) {
       .sm:tw-foo { color: blue }
   }
   @media (min-width: 768px) {
       .md:tw-foo { color: blue }
   }
   @media (min-width: 992px) {
       .lg:tw-foo { color: blue }
   }
   @media (min-width: 1200px) {
       .xl:tw-foo { color: blue }
   }

   This is the reason for putting the prefix at the beginning of the utility name, not the class name.

   If we put the prefix at the beginning of the full class, your own custom utilities would have no prefix, and the responsive prefixes would look different:

   <div class="tw-text-blue custom-foo tw-md:text-red md:custom-bar">
       <!-- ... -->
   </div>

   This inconsistency was ugly enough that it felt like putting the prefix before just the utility portion was the right move, because the only other option was prefixing your own custom utilities too, and that didn't feel right either.

Important

Important is simpler; it just makes all of Tailwind's utilities !important.

It doesn't make any of your own custom utilities that use Tailwind features important though; if you want that behavior, simply mark them as !important yourself:

@responsive {
    .foo {
        color: blue !important;
    }
}

One important special case here is the .container class. Using the important option does not make the .container class important.

This is because that class isn't really a utility; it's more of a component. It already gets special treatment in the codebase in that it doesn't get responsive variations generated (.md:container, .lg:container, etc.).

Since it's more of a component, it makes sense that it's styles should be overridable if needed, even though I don't know why you'd ever do that.

The End.

If you have opinions about all the prefix positioning crap I am open to hearing them, we argued about it for a while and this seemed like the best solution.

[reinink]

Bravo!