Feature request: Non Mobile first approach switch

[cizza]

Hi there,

thank you for your great work on Tailwind. I'm using it in my cms I'm currently developing and I've hit quite an interesting situation, for which I don't think there is a solution at the moment.

Tailwind is mobile first approach by default, which is great, however I've just switched to non-mobile mobile approach creating my screen settings in the tailwind config file like this:

screens: {
'xl': {'min': '1200px'},
'lg': {'max': '1199px'},
'md': {'max': '991px'},
'sm': {'max': '767px'},
'xs': {'max': '576px'}
}

and when I need, I simply use the @Responsive directive to generate any required styles.

The problem I'm facing is the order the styles are getting generated, for example:

@Responsive {
.mr-10px { margin-right: 10px; }
}

generates the responsive classes in correct order but the non responsive class is generated underneath the responsive ones, and therefore overriding the responsive classes. That's quite a problem.

What I propose is a property in the custom tailwind config file:

mobileFirst: true [true/false] - true by default

which would allow the user to switch the mobile first off, in which case the non responsive class would get generated above the responsive classes.

I think it makes sense, because in the config file, we can actually control the order in which the responsive classes are generated, but we can't select to generate the non-responsive class above or below the rest.

If I may ask for anyone responding to this thread, please refrain from proposing to use mobile first approach or to disapprove a validity of non mobile first approach.

Thank you all!

[adamwathan]

Hey! I *think* you can work around this already by manually specifying where the responsive classes should be generated using the `@tailwind screens` directive: ``` @tailwind preflight; @tailwind components; @tailwind screens; @tailwind utilities; ``` See if that helps 👍🏻

…

On Sun, Mar 17, 2019 at 4:36 PM cizza ***@***.***> wrote: Hi there, thank you for your great work on Tailwind. I'm using it in my cms I'm currently developing and I've hit quite an interesting situation, for which I don't think there is a solution at the moment. Tailwind is mobile first approach by default, which is great, however I've just switched to non-mobile mobile approach creating my screen settings in the tailwind config file like this: screens: { 'xl': {'min': '1200px'}, 'lg': {'max': '1199px'}, 'md': {'max': '991px'}, 'sm': {'max': '767px'}, 'xs': {'max': '576px'} } and when I need, I simply use the @Responsive <https://github.com/Responsive> directive to generate any required styles. The problem I'm facing is the order the styles are getting generated, for example: @Responsive <https://github.com/Responsive> { .mr-10px { margin-right: 10px; } } generates the responsive classes in correct order but the non responsive class is generated underneath the responsive ones, and therefore overriding the responsive classes. That's quite a problem. What I propose is a property in the custom tailwind config file: mobileFirst: true [true/false] - true by default which would allow the user to switch the mobile first off, in which case the non responsive class would get generated above the responsive classes. I think it makes sense, because in the config file, we can actually control the order in which the responsive classes are generated, but we can't select to generate the non-responsive class above or below the rest. If I may ask for anyone responding to this thread, please refrain from proposing to use mobile first approach or to disapprove a validity of non mobile first approach. Thank you all! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#778>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEH3bCdwIA9MUM5PYiPDvht9_0KsCuajks5vXqc4gaJpZM4b4oBi> .

[cizza]

Hello Adam,

thank you for your very fast response.

I'm afraid that doesn't help. I just tried this approach and it looked very promising and logical, but the end result seems to be the same. To be on the same page, here is my tailwind scss import:

@tailwind preflight;
@tailwind components;
@tailwind screens;
@tailwind utilities;

@Responsive {
.ml-32px {
margin-left: 32px;
}
}

and this is the end result:

@media (min-width: 1200px) {
.xl:ml-32px {
margin-left: 32px;
}
}
@media (max-width: 1199px) {
.lg:ml-32px {
margin-left: 32px;
}
}
@media (max-width: 991px) {
.md:ml-32px {
margin-left: 32px;
}
}
@media (max-width: 767px) {
.sm:ml-32px {
margin-left: 32px;
}
}
@media (max-width: 576px) {
.xs:ml-32px {
margin-left: 32px;
}
}
.ml-32px {
margin-left: 32px;
}

As you can see, the non responsive class is at the end, overriding the responsive classes.

Btw, I'm using v0.7.4

Thank you.

[adamwathan]

Can you show me a full example including your input and the desired output? The default behaviour puts the responsive classes at the very end so if that’s what you want I’m surprised there’s an issue there.

…

On Sun, Mar 17, 2019 at 5:10 PM cizza ***@***.***> wrote: Hello Adam, thank you for your very fast response. I'm afraid that doesn't help. I just tried this approach and it looked very promising and logical, but the end result seems to be the same. To be on the same page, here is my tailwind scss import: @tailwind <https://github.com/tailwind> preflight; @tailwind <https://github.com/tailwind> components; @tailwind <https://github.com/tailwind> screens; @tailwind <https://github.com/tailwind> utilities; @Responsive <https://github.com/Responsive> { .ml-32px { margin-left: 32px; } } and this is the end result: @media <https://github.com/media> (min-width: 1200px) { .xl:ml-32px { margin-left: 32px; } } @media <https://github.com/media> (max-width: 1199px) { .lg:ml-32px { margin-left: 32px; } } @media <https://github.com/media> (max-width: 991px) { .md:ml-32px { margin-left: 32px; } } @media <https://github.com/media> (max-width: 767px) { .sm:ml-32px { margin-left: 32px; } } @media <https://github.com/media> (max-width: 576px) { .xs:ml-32px { margin-left: 32px; } } .ml-32px { margin-left: 32px; } As you can see, the non responsive class is at the end, overriding the responsive classes. Thank you. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#778 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEH3bEu9nfUCO-QO-jAX_O23lY3zXkClks5vXq9agaJpZM4b4oBi> .

[cizza]

Hello Adam,

I went back to the docs, to read them again and I guess the feature request is not required. Because the way the @Responsive feature works - or should work, is absolutely sufficient.

That leaves me scratching my head wondering, why does it not work on my build. I will test this locally on a new empty project and will refer my findings to you.

Thank you for your help so far.

[cizza]

Hello Adam,

I've installed a new laravel project and implemented Tailwind. My result is the same on this brand new laravel project. I will list all important settings I think relate to Tailwind in the screenshots. I didn't change anything on the laravel project, just removed everything to get as clean css output as possible.

[adamwathan]

What output do you actually want, can you show me what you want Tailwind to generate?

…

On Sun, Mar 17, 2019 at 6:02 PM cizza ***@***.***> wrote: Hello Adam, I've installed a new laravel project and implemented Tailwind. My result is the same on this brand new laravel project. I will list all important settings I think relate to Tailwind in the screenshots. I didn't change anything on the laravel project, just removed everything to get as clean css output as possible. [image: app_scss] <https://user-images.githubusercontent.com/5670171/54498498-f29a1780-4910-11e9-9db0-b7436e9fce47.jpg> [image: css_output] <https://user-images.githubusercontent.com/5670171/54498500-f332ae00-4910-11e9-883f-55c6f6848ba3.jpg> [image: packagejson] <https://user-images.githubusercontent.com/5670171/54498501-f332ae00-4910-11e9-85ac-52b9aae7ef4e.jpg> [image: tailwindjs] <https://user-images.githubusercontent.com/5670171/54498502-f3cb4480-4910-11e9-9300-9ee2458655a2.jpg> [image: webpackmix] <https://user-images.githubusercontent.com/5670171/54498503-f3cb4480-4910-11e9-970e-c41f168dcc2f.jpg> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#778 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEH3bG8fo6vqO_hoWNyyGcj9buos9ZoXks5vXrtfgaJpZM4b4oBi> .

[cizza]

Yes, here is the desired output, non responsive class first:

As the docs say:

The responsive versions will be added to Tailwind's existing media queries at the end of your stylesheet. This makes sure that classes with a responsive prefix always defeat non-responsive classes that are targeting the same CSS property

[cizza]

Am I missing here something, doing something wrong?

[adamwathan]

Cool well you should get that result automatically if you delete the `@tailwind screens` directive. I’m just on my phone so can’t make any example project but that’s the default behaviour.

…

On Sun, Mar 17, 2019 at 6:11 PM cizza ***@***.***> wrote: Am I missing here something, doing something wrong? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#778 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEH3bIkOjEz4n3OhcSuc9cJJ5SOosdEXks5vXr2SgaJpZM4b4oBi> .

[cizza]

Thank you Adam,

that resolved the issue. Don't know how to thank you enough. I'll dive into the docs again to try to understand this better. I've checked the code but it's beyond me.

I'll close down the issue.

Thank you for developing Tailwind, it's an amazing software, very useful, well thought through and very well written.

You're quite an inspiration.

Good night.

[adamwathan]

Ah cool glad that is working for you! 🙌🏻 Thanks for the kind words, really appreciate it :)