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] )