Extracting Components of Responsive Classes

[klickreflex]

First of all congratulations to and a big thanks for releasing Tailwind, it's looking great so far.

I'm having one problem which I'm not quite sure on how to best solve: Currently it's not possible to use breakpoint prefixes when extracting a component. Any chance to make this happen?

Currently when trying to do something like:

.foo {
    @apply .bg-blue .sm:bg-green;
}

I get: CssSyntaxError: /Users/daniel/lab/tailwind/src/styles.css:21:5: No .sm\:bg-green class found.

[imjohnbon]

I wasn't able to test this but I think it might work:

.foo {
   @apply .bg-blue;
   @screen sm {
      @apply .bg-green;
   }
}

[klickreflex]

Hm, that gives me:

internal/streams/legacy.js:59
      throw er; // Unhandled stream error in pipe.
      ^
Error: CSS parse error styles.css: Identifier is expected
 3647 |
 3648 |  @media (min-width: 576px) {
 3649 |    background-color: #38c172;
----------------------------^
 3650 |  }
 3651 |}

Seems it's not possible to use @screen inside a selector. This would work, but looks rather cumbersome:

.foo {
    @apply .bg-blue;
}

@screen sm {
    .foo {
        @apply .bg-green;
    }
}

[imjohnbon]

That is strange because this page of the docs has this example:

.btn {
  &:hover {
    @apply .bg-blue;
  }
  @screen md {
    @apply .inline-block;
  }
}

Which is why I thought that would work. Will try to test this myself later and see what I can find.

[adamwathan]

Hey! So that example from the docs page assumes you are using a preprocessor like Sass or Less, or even using CSSNext, all of which support that sort of nesting.

Tailwind itself doesn't bake that sort of thing in, so if you are just writing your stuff in raw CSS, you'll need to put the hover declarations and media queries outside of the original declaration:

.btn {
  /* ... */
}
.btn:hover {
  @apply .bg-blue;
}
@screen md {
  .btn {
    @apply .inline-block;
  }
}

Again, if you want to use the nested syntax, it's absolutely no problem to just write your CSS in Sass or Less; Tailwind doesn't care 👍

I've personally been enjoying using CSSNext lately, which is another PostCSS plugin for adding forward-facing CSS features, including support for nesting.

If you want to give that a shot, pull it in like this:

npm install postcss-cssnext

...then add it as a PostCSS plugin after Tailwind. Here's a quick example using Laravel Mix:

let cssnext = require('postcss-cssnext');

mix.postCss('resources/assets/css/app.css', 'public/css', [
  tailwindcss('./tailwind.js'),
  cssnext()
]);

CSSNext supports nesting media queries without doing anything fancy, and since Tailwind will convert any @screen rules into plain media queries before CSSNext sees your CSS, @screen is fully nestable as well.

Hope that helps!

[adamwathan]

Try moving postcss-nested after Tailwind, I usually use cssnext which includes postcss-nested and that’s where I put that plugin. On Sun, Jun 10, 2018 at 12:25 PM Kenyon Kowal notifications@github.com wrote:

I haven't been able to get this to work with postcss-nested. Is this a known problem?

Here's my postcss config

var tailwindcss = require('tailwindcss');

module.exports = { plugins: [ require('postcss-easy-import')({ prefix: '_' }), require('postcss-mixins'), require('postcss-simple-vars'), require('postcss-conditionals'), require('postcss-nested'), require('postcss-color-function'), require('postcss-hexrgba')(), tailwindcss('tailwind.js'), require('autoprefixer')() ] }

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/tailwindcss/discuss/issues/12#issuecomment-396061988, or mute the thread https://github.com/notifications/unsubscribe-auth/AEH3bOehhxxai4wKlk5fRp9r-UzaLGkAks5t7Uh8gaJpZM4QPhV4 .

[knynkwl]

Ah yeah, that worked. Thanks!