Tailwind (with Config & TailwindUI & PurgeCSS)

A utility-first CSS framework for rapid UI development. (based off Mark Mead's template based off Benjamin Darcet's template)
Icons/chart bar
Used 266 times
Created by
r rodreegez

Usage

Run this command in your Rails app directory in the terminal:

rails app:template LOCATION="https://railsbytes.com/script/zJosN1"
Template Source

Review the code before running this template on your machine.

run "yarn add tailwindcss @tailwindcss/ui"
run "yarn tailwind init"

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

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

run "npx tailwindcss init"


inject_into_file "app/javascript/packs/application.js" do <<~EOF
  require('css/application.scss')
  EOF
end

inject_into_file "postcss.config.js", before: "require('postcss-import')" do <<~EOF
  require('tailwindcss'),
  EOF
end

inject_into_file "app/views/layouts/application.html.erb", before: "</head>" do <<~EOF
  <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  EOF
end

gsub_file "tailwind.config.js", /plugins:\s\[],/, "plugins: [require('@tailwindcss/ui')],"

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

Sign up or Login to leave a comment.