Tailwind jit inspired utility css generator

This gem reads files in your view folders for tailwind-like classes and writes the resulting utility css classes to a css file.

Kind of like tailwind-jit, almost.

gem install ucss

or in your gemfile

gem 'ucss'

ucss = UCss.new
ucss.read(from: './views')
ucss.write(to: './assets/css/utility.css')

This won't pick up dynamic string stuff so let's say you're using markaby and you have something like this:

gap = 1
div class: "flex gap-#{gap}" do
  "this is an element"
end

That won't work, here's one way to get it working:

gap = 0
gaps = ['gap-1']

div class: "flex #{gaps[gap]}" do
  'this is an element'
end

or you could do one better:

def vstack(options = {}, &block)
  div class: "flex flex-row flex-auto items-center #{options[:class]}" do
    yield block if block
  end
end

vstack(class: 'gap-1') do
  div '1'
  div '2'
  div '3'
end

This is assuming you use markaby of course and you're trying to come up with re-usable bits of html.