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)
Used 329 times
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