diff --git a/README.md b/README.md
index af315f4..1d601d9 100644
--- a/README.md
+++ b/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
+
+
+ Hello World
+
+```
+
+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"
+```
diff --git a/lib/tailwindcss/compiler/runner.rb b/lib/tailwindcss/compiler/runner.rb
index 777bd01..a544059 100644
--- a/lib/tailwindcss/compiler/runner.rb
+++ b/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}"
diff --git a/lib/tailwindcss/helpers.rb b/lib/tailwindcss/helpers.rb
index 23567b6..2900738 100644
--- a/lib/tailwindcss/helpers.rb
+++ b/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
diff --git a/lib/tailwindcss/style.rb b/lib/tailwindcss/style.rb
index 9ad9896..8c729c5 100644
--- a/lib/tailwindcss/style.rb
+++ b/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
diff --git a/lib/tasks/tailwindcss.rake b/lib/tasks/tailwindcss.rake
index b58b524..2736cee 100644
--- a/lib/tasks/tailwindcss.rake
+++ b/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
diff --git a/spec/tailwindcss/style_spec.rb b/spec/tailwindcss/style_spec.rb
index 2a2f2c0..c25a449 100644
--- a/spec/tailwindcss/style_spec.rb
+++ b/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]
)