Masahiro Okubo

railsのsimple formでtailwindのエラーを適用

railsのsimple formでtailwindのエラーを適用

下記の記事を参考に実装しました

SimpleForm.setup do |config|
  # Wrappers are used by the form builder to generate a
  # complete input. You can remove any component from the
  # wrapper, change the order or even add your own to the
  # stack. The options given below are used to wrap the
  # whole input.
  config.wrappers :default, class: :input,
    hint_class: :field_with_hint, error_class: '', valid_class: '' do |b|

    b.use :label, class: "block text-sm font-medium text-gray-700"
    b.use :input,
          class: 'appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm',
          error_class: 'block w-full pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm rounded-md'
    b.use :full_error, wrap_with: { tag: 'p', class: 'mt-2 text-sm text-red-600' }
    b.use :hint,  wrap_with: { tag: :p, class: "mt-2 text-sm text-gray-500" }
  end

参考記事

https://github.com/abevoelker/simple_form_tailwind_css/blob/2c6e7d3654bc2f5dc1bf43db4618f968ce874502/lib/generators/simple_form/tailwind/templates/simple_form.rb

Buy Me A Coffee

関連記事

copyright© 2016-2021 Masahiro Okubo