palkan / view_component-contrib

A collection of extension and developer tools for ViewComponent
MIT License
369 stars 22 forks source link

styled variants not included in the tailwind build file #43

Closed stream-toma closed 8 months ago

stream-toma commented 9 months ago

What did you do?

  1. Setup using the script
  2. Created a simple button component using the variants as outlined in the readMe.
# frozen_string_literal: true
class Atoms::Button::Component < ApplicationComponent
  option :type, default: proc { "button" }
  option :variant, default: proc { :default }
  option :disabled, default: proc { false }

  style do
    base {
      %w[
        font-medium bg-blue-500 text-white rounded-full
      ]
    }
    variants {
      color {
        primary { %w[bg-blue-500 text-white] }
        secondary { %w[bg-cyan-500 text-white] }
      }
      size {
        sm { "text-xs" }
        md { "text-base" }
        lg { "px-4 py-3 text-lg" }
      }
      disabled {
        yes { "opacity-75" }
      }
    }
    defaults { {size: :sm, color: :primary} }
    # The "compound" directive allows us to declare additional classes to add
    # when the provided combination is used
    # compound(variant: :outline, disabled: true) { %w[opacity-75 bg-slate-300] }
  end
end

What did you expect to happen?

Tailwind to include the css variables into the builds/tailwind.css file.

What actually happened?

Was not included.

Additional context

When I included them manually in another file (i.e. in another component I used bg-blue-500 & bg-cyan-500) and used the variants the styles came through correctly.

Not sure if there is additional setup that I have missed.

Environment

Ruby Version: Ruby 3.2

Framework Version (Rails, whatever):

Rails 7.1.2

View Component Contrib Version:

view_component-contrib 0.2.2

stream-toma commented 9 months ago

include ViewComponentContrib::StyleVariants is in ApplicationComponent

palkan commented 9 months ago

Do you have the components path added in your tailwind.config.js (content):

const config: Config = {
  content: [
    './app/components/**/*',
  ],

}

Maybe, you have smth like **/*.erb or whatever not matching Ruby files.

stream-toma commented 8 months ago

That was correct! Added:

"./app/views/*/.{erb,html,rb}"

and that solved it