Add variants support to container plugin

[adamwathan]

This PR adds variants support to the container plugin, allowing you to generate responsive variants (like md:container) or even pseudo-class variants (like hover:container, which is a terrible idea but it's a free country.)

I've enabled responsive variants for the container by default, which closes #1964.

One less than ideal thing about the current implementation is that it generates some unreachable CSS:

@media (min-width: 1280px) {
  .xl\:container {
    width: 100%
  }

  /* This is unreachable */
  @media (min-width: 640px) {
    .xl\:container {
      max-width: 640px
    }
  }

  /* This is unreachable */
  @media (min-width: 768px) {
    .xl\:container {
      max-width: 768px
    }
  }

  /* This is unreachable */
  @media (min-width: 1024px) {
    .xl\:container {
      max-width: 1024px
    }
  }

  @media (min-width: 1280px) {
    .xl\:container {
      max-width: 1280px
    }
  }
}

I think it's worth it to avoid introducing a lot of extra complexity, but we might consider adding another optimization later on that is able to remove dead code like this.

[zzwx]

What I mean is, does the above nesting code do anything more than what this CSS does:

.container {
  width: 100%
}
@media (min-width: 640px) {
  .container,
  .sm\:container {
    max-width: 640px
  }
}
@media (min-width: 768px) {
  .container,
  .md\:container {
    max-width: 768px
  }
}
@media (min-width: 1024px) {
  .container,
  .lg\:container {
    max-width: 1024px
  }
}
@media (min-width: 1280px) {
  .container,
  .xl\:container {
    max-width: 1280px
  }
}

[browner12]

Thank you for adding responsive containers to Tailwind. However, after using it and looking through the generated CSS, it does not appear to be behaving as expected. Since there is a media query that wraps the whole thing, the containers are losing their margin and padding at widths below the breakpoint. That means, for example, that md:container is receiving the margin and padding above the 768px breakpoint, but losing them below that breakpoint. This inconsistency makes it very difficult to use the responsive containers.

I was the original author of responsive containers on Bootstrap. Here are the relevant PRs.

twbs/bootstrap#25631
twbs/bootstrap#29118

I'm making the assumption we want the Tailwind responsive containers to behave the same, so if I'm wrong on that, let me know.

Here is the CSS we desired to generate (with some tweaks to bring it closer to Tailwind):

.container,
.sm:container,
.md:container,
.lg:container,
.xl:container {
  width: 100%;
  padding-right: theme('container.padding');
  padding-left: theme('container.padding');
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 640px) {
  .container,
  .sm:container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container,
  .sm:container,
  .md:container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container,
  .sm:container,
  .md:container,
  .lg:container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container,
  .sm:container,
  .md:container,
  .lg:container,
  .xl:container {
    max-width: 1280px;
  }
}

I am more than willing to help update this, but I am much more familiar with writing SASS than how Tailwind does it with JS, so I just need some direction on that.

[zzwx]

@browner12 , I don't think @adamwathan sees this closed merge. May be you need to open a new issue.

[browner12]

yah, that's the feeling I was getting.

good idea.