PostCSS media queries not working (Tachyons)

sage
1

Hi,

I’ve installed and imported Tachyons https://yarnpkg.com/en/package/tachyons
@import “~tachyons/src/tachyons”; (main.scss)

Only selectors without -ns -m -l are working. For example only .flex is working. From tachyons/_flexbox.css:

.flex { display: flex; }

@media (--breakpoint-not-small) {
.flex-ns { display: flex; }
}

Is there something missing from Sage’s webpack config to make this work?

2

I made a guide that covers building Tachyons in Sage (vanilla CSS). It could be useful for you.

1 Like
3

Also, since you are using Sass, why not use the built-in Tachyons (tachyons-sass)? Then you have access to its media query variables:

1 Like
4

Thanks. This was just what I was looking for. I like the idea of using Tachyons as a starter kit.

Any idea why my localhost:3000 refreshes the whole page when I make changes to .php-files? I’m using Local by Flywheel. It is also painfully slow when whole page starts to reload. CSS changes happen instantly.

5

Sounds like a Blade caching issue. Search the forum for that one, it’s quite common.

I think it’s common more for people who are making constant changes to their Blade templates — like you would be using Tachyons. Every time there is a change to the templates, it rebuilds the page and as you could imagine this is slow since your filesystem is syncing with VM. Updating the CSS is fast because webpack is just injecting it (I think).

1 Like
6

Yeah, thanks. Also on Mac, the .local tld shouldn’t be used. Something to do with Mac using Bonjour service. Browser waits for a time out before loading the page. Instead .test should be used.

1 Like
7

This is really good to know and it makes sense. Seems pretty problematic for Local by Flywheel.

8

Maybe a time for another topic, but I’m interested how do you style elements outside of templates with Tachyons? I mean tags created by the_content() etc. I used to use @extend with Tachyons Sass. Found out it’s possible with PostCSS too, but not sure it’s the best way. Maybe just style them with regular css utilizing vars?

9

Yes, this is off topic. I’ll give an answer, but you can DM me if you would like to discuss more — cause I do like talking about this stuff. I’m thinking of creating a more general topic on using utility/functional CSS frameworks with Sage, since it usually comes its own set of issues — and advantages!

The tachyons-cms module is included in Tachyons (see here). It has .nested- classes for this type of thing. The problem with this approach is — though you will be required to duplicate code — it is being duplicated in a way that is, IMO, not super manageable. @extend, like you said, could be the solution to this, however, it is considered by many to be an anti-pattern.

For PostCSS, postcss-cssnext still has @apply which was a rejected future CSS syntax. Tailwind CSS makes use of this function to extract components from its generated utilities. For example, with Tailwind I usually do something similar to the following:

.rich-text { // or .markdown or whatever you'd like
  h1 {
    @apply .leading-tight .my-4 .uppercase .tracking-wide;
  }

  p {
    @apply .leading-normal .my-6;
  }

  // etc.
}

Then I wrap the_content() (or a rich text custom field) with a <div> (or whatever element) with that class:

<div class="rich-text">
@php the_content() @endphp
</div>
1 Like