Minimal Tailwind 2.0

Template Source

Review the code before running this template on your machine.

run "yarn add tailwindcss@yarn:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9"

# Uncomment and run as needed. Make sure to uncomment required plugins in tailwind.config.js
# run "yarn add @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio"

run "mkdir app/javascript/stylesheets"
run "touch app/javascript/stylesheets/application.scss"

inject_into_file "app/javascript/stylesheets/application.scss" do <<~EOF
  @import "tailwindcss/base";
  @import "tailwindcss/components";
  @import "tailwindcss/utilities";
  EOF
end

inject_into_file 'app/javascript/packs/application.js', after: 'require("channels")' do <<~EOF

  require("stylesheets/application.scss")
  EOF
end

run "npx tailwindcss init"

gsub_file "tailwind.config.js", /purge:\s\[\],/, <<-PURGE
  purge: [
    './app/**/*.html.erb',
    './app/**/*.html.haml',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/javascript/**/*.vue',
    './app/javascript/**/*.jsx'
  ],
PURGE

gsub_file "tailwind.config.js", /plugins:\s\[\],/, <<-PLUGINS
  plugins: [
    // require('@tailwindcss/forms'),
    // require('@tailwindcss/typography'),
    // require('@tailwindcss/aspect-ratio'),
  ],
PLUGINS

run "mv tailwind.config.js app/javascript/stylesheets/tailwind.config.js"

inject_into_file 'postcss.config.js', before: "require('postcss-import')" do <<~EOF
  require('tailwindcss')('./app/javascript/stylesheets/tailwind.config.js'),
  require('autoprefixer'),
  EOF
end

insert_into_file "app/views/layouts/application.html.erb",
  after: "<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>\n" do <<~EOF
  \t\t<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  EOF
end

Comments

Sign up or Login to leave a comment.