More docs

README.md

@@ -5,13 +5,19 @@ that help you build your own UI framework in ruby.
 
 ## Basic Usage
 
-At its core of the gem, is the style class. This class is used to generate tailwindcss classes in a ruby-like way.
+At its core of the gem, is the `Style` class. This class is used to generate tailwindcss classes in a ruby-like way.
 
 ```ruby
 Tailwindcss::Style.new(bg: :red).to_s
 # => "bg-red-500"
+```
+
+Or using the `tailwind` helper.
+
+```ruby
+include Tailwindcss::Helpers
 
-Tailwindcss::Style.new(bg: :red, text: :white).to_s
+tailwind(bg: :red, text: :white)
 # => "bg-red-500 text-white"
 ```
 
@@ -20,10 +26,10 @@ Tailwindcss::Style.new(bg: :red, text: :white).to_s
 Any key that starts with an underscore is considered a modifier. Modifiers are used to add pseudo classes and elements to the class.
 
 ```ruby
-Tailwindcss::Style.new(bg: :red, text: :white, _hover: {bg: :blue}).to_s
+tailwind(bg: :red, text: :white, _hover: { bg: :blue })
 # => "bg-red-500 text-white hover:bg-blue-500"
 
-Tailwindcss::Style.new(bg: :red, text: :white, _hover: {bg: :blue}, _before: {content: '""'}).to_s
+tailwind(bg: :red, text: :white, _hover: { bg: :blue }, _before: { content: '""' })
 # => "bg-red-500 text-white hover:bg-blue-500 before:content-[\"\"]"
 ```
 
@@ -62,3 +68,99 @@ Tailwindcss.configure do |config|
   # other theme configurations
 end
 ```
+
+## Compiling your styles
+
+You can compile your styles by running the following command.
+
+```bash
+bundle exec rake tailwindcss:compile
+```
+
+Or by starting a process that watches for changes.
+
+```bash
+bundle exec rake tailwindcss:compile --watch
+```
+
+#### How the compiler works
+
+The `tailwindcss-rb` compiler parses through the files in the `config.content`, and attempts to stactically extract the arguments you pass to the `tailwind` helper method. It then generates the tailwindcss classes and writes them to the `config.compiler.output_path`.
+
+This file is then used by the tailwindcss compiler to generate the final css file.
+
+##### Example
+
+Given that you configured the gem as follows:
+
+```ruby
+Tailwindcss.configure do |config|
+  config.content = [
+    "app/views/**/*.html.erb",
+  ]
+end
+```
+
+And that you're writing the following code in your view file:
+
+```erb
+# app/views/layouts/application.html.erb
+
+<div class="<%= tailwind(bg: :red, text: :white) %>">
+  Hello World
+</div>
+```
+
+The compiler will generate the following "classes" file.
+
+```
+bg-red-500 text-white
+```
+
+And these classes will be added by the tailwind compiler to the final css file.
+
+
+## Advanced Usage
+
+### Using arbitrary values
+
+When using arbitrary values, you have one of two options.
+
+1. Wrap the value in `[]` to use the value as is.
+
+```ruby
+tailwind(bg: "[url('image.png')]")
+# => "bg-[url('image.png')]"
+```
+
+2. Use the `ab` method to add arbitrary values.
+
+```ruby
+include Tailwindcss::Helpers
+
+tailwind(bg: ab("url('image.png')"))
+```
+
+### Using color scheme values
+
+You can use the color scheme values by using the `color_scheme_token` method.
+
+```ruby
+Tailwindcss.configure do |config|
+  config.theme.color_scheme = {
+    primary: :red,
+    secondary: :blue,
+    tertiary: :green
+  }
+end
+
+tailwind(bg: color_scheme_token(:primary))
+# => "bg-red-500"
+```
+
+Optionally, you can specify a shade.
+
+```ruby
+tailwind(bg: color_scheme_token(:primary, 100))
+# => "bg-red-100"
+```

lib/tailwindcss/compiler/runner.rb

@@ -1,19 +1,24 @@
+
+require "listen"
+require "tailwindcss"
+require "tailwindcss/compiler/file_classes_extractor"
+require "tailwindcss/compiler/output"
+require "tailwindcss/compiler/connection" if defined?(ActionCable)
+require "tailwindcss/compiler/channel" if defined?(ActionCable)
+
 module Tailwindcss
   module Compiler
     class Runner
-      require "listen"
-      require "tailwindcss"
-      require "tailwindcss/compiler/file_classes_extractor"
-      require "tailwindcss/compiler/output"
-      require "tailwindcss/compiler/connection" if defined?(ActionCable)
-      require "tailwindcss/compiler/channel" if defined?(ActionCable)
+      extend Dry::Initializer
+
+      option :watch, default: -> { nil }
 
       def call # rubocop:disable Metrics/AbcSize, Metrics/MethodLength
         output = Output.new
         file_classes_extractor = FileClassesExtractor.new
 
         content.each do |location|
-          if Tailwindcss.config.watch_content
+          if watch || (watch.nil? && Tailwindcss.config.watch_content)
             listener = Listen.to(File.dirname(location.to_s), only: /\.(rb|erb)$/) do |modified, added, removed|
               Tailwindcss.logger.info "Recompiling Tailwindcss..."
               Tailwindcss.logger.info "Modified: #{modified}"

lib/tailwindcss/helpers.rb

@@ -8,11 +8,15 @@ def ab(value)
       ArbitraryValue.new(value)
     end
 
-    def color_scheme_token(token, weight)
+    # @param token [String] A value your Tailwindcss.config.theme.color_scheme keys
+    # @param weight [Integer] A value between 100 and 900
+    def color_scheme_token(token, weight = 500)
       color_token(Tailwindcss.theme.color_scheme[token.to_sym], weight)
     end
 
-    def color_token(color_token, weight)
+    # @param color_token [String] A value your of any of tailwinds color tokens
+    # @param weight [Integer] A value between 100 and 900
+    def color_token(color_token, weight = 500)
       "#{color_token}-#{weight}"
     end
   end

lib/tailwindcss/style.rb

@@ -17,7 +17,7 @@ def to_s
       to_a.join(" ")
     end
 
-    def to_html_attribute
+    def to_html_attributes
       {class: to_s}
     end
 

lib/tasks/tailwindcss.rake

@@ -7,8 +7,9 @@ namespace :tailwindcss do
   end
 
   desc "Compile TailwindCSS"
-  task :compile do
+  task :compile do |t, args|
     require "tailwindcss/compiler/runner"
-    Tailwindcss::Compiler::Runner.new.call
+    watch = args[:watch] || false
+    Tailwindcss::Compiler::Runner.new(watch:).call
   end
 end

spec/tailwindcss/style_spec.rb

@@ -83,7 +83,7 @@
     end
   end
 
-  describe "#to_html_attribute" do
+  describe "#to_html_attributes" do
     it "returns a hash of style attributes" do
       style = Tailwindcss::Style.new(
         bg: :red,
@@ -93,8 +93,8 @@
         _lg: {mt: 10}
       )
 
-      expect(style.to_html_attribute).to have_key(:class)
-      expect(style.to_html_attribute[:class].split(' ')).to match_array(
+      expect(style.to_html_attributes).to have_key(:class)
+      expect(style.to_html_attributes[:class].split(' ')).to match_array(
         %w[bg-red text-white hover:bg-blue hover:sm:mt-10 hover:after:p-10
           hover:after:lg:p-14 before:content-[""] lg:mt-10]
       )