Replacement ideas for @import about tailwindcss-rails HOT 6 CLOSED

Hey @Tonksthebear

I am just sitting in front of my old 2012 mb pro, ready to start a new done-on-weekends e-commerce app with rails 6.1, hotwire and TailwindCSS. I also need a lot a few tweaks of CSS definitions for repetitive tags such as tables, forms, and specially buttons.

I think the big problem here is how can I have SM like tailwind's @apply using Sprockets. SASS has a @extend that works as @apply.

SASS has also @import to create chunks of CSS.

Therefore, I think is better to use SASS instead of helpers.
I will play around the idea...

from tailwindcss-rails.

I'm also wondering how to tackle the missing @apply. I love being able to use the asset pipeline instead of webpacker for tailwind, but not having @apply is a drawback for sure. Using rails-helpers/partials could work as a workaround, but doesn't feel quite as clean. Interested in how your experimentation goes @ccastillop!

from tailwindcss-rails.

This is interesting! 🤔
YAML? Where do you put this file?

from tailwindcss-rails.

@ccastillop I definitely get what you're saying. SASS would be best, but I assumed tailwind required the special @apply keyword because they need to do something special to actually @include the styles. So I just decided to do the quickest solution I could think of that felt relatively clean without diving into any source code.

@leehericks I have an internal gem I made for reusable components across my various projects, so I just added a namespaces config directory for that in my config directory.

config/namespace/styles.yml

Then I made a simple helper that just concats any styles from this file with the given arguments.

Ultimately though, tailwind jit mode makes the benefits of just using the node version outweigh the benefits of relying on strictly the asset pipeline. For my uses, I just use jit mode with webpacker and stick with asset pipeline for js. #50 has interesting suggestions for how to do this without webpacker (still node). I'm still using my yaml helper because I like seeing the actual classes in web inspector, vs @apply which would hide the actual classes behind the given class name (ex. .btn).

from tailwindcss-rails.

I'd be happy to see @apply implemented as a sprockets processor, if possible. Not going to rely on node for this particular gem. Please do open a PR if you end up exploring that!

from tailwindcss-rails.

Following back on this to provide some extra info. For anyone who needs @import because they aren't using a bundler, I made classy-yaml to solve this issue. It leverages YAML files in order to provide similar functionality.

from tailwindcss-rails.