diff --git a/.gitignore b/.gitignore index 9708fdf..2e9f7b7 100644 --- a/.gitignore +++ b/.gitignore @@ -37,3 +37,6 @@ # Ignore master key for decrypting credentials and more. /config/master.key + +/app/assets/builds/* +!/app/assets/builds/.keep diff --git a/Gemfile b/Gemfile index 0e95a76..583b0a5 100644 --- a/Gemfile +++ b/Gemfile @@ -81,3 +81,5 @@ group :test do gem "selenium-webdriver" gem "webdrivers" end + +gem "tailwindcss-rails", "~> 2.0" diff --git a/Gemfile.lock b/Gemfile.lock index 131d8d6..6e90baa 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -191,6 +191,10 @@ GEM sqlite3 (1.6.0-x86_64-linux) stimulus-rails (1.2.1) railties (>= 6.0.0) + tailwindcss-rails (2.0.21-x64-mingw-ucrt) + railties (>= 6.0.0) + tailwindcss-rails (2.0.21-x86_64-linux) + railties (>= 6.0.0) thor (1.2.1) timeout (0.3.1) turbo-rails (1.3.3) @@ -236,6 +240,7 @@ DEPENDENCIES sprockets-rails sqlite3 (~> 1.4) stimulus-rails + tailwindcss-rails (~> 2.0) turbo-rails tzinfo-data web-console @@ -245,4 +250,4 @@ RUBY VERSION ruby 3.1.3p185 BUNDLED WITH - 2.3.26 + 2.4.6 diff --git a/Procfile.dev b/Procfile.dev new file mode 100644 index 0000000..023e98a --- /dev/null +++ b/Procfile.dev @@ -0,0 +1,2 @@ +web: bin/rails server -p 3000 +css: bin/rails tailwindcss:watch diff --git a/README.md b/README.md index 47804d8..65ca097 100644 --- a/README.md +++ b/README.md @@ -2,12 +2,16 @@ ## Snippets -### Create a controller +### Scaffolding models + +Creates model, controller and view with basic CRUD functionality ``` sh -bin/rails generate +bin/rails generate scaffold person username firstname lastname password ``` +` + ### Create a model ``` sh diff --git a/app/assets/builds/.keep b/app/assets/builds/.keep new file mode 100644 index 0000000..e69de29 diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js index ddd546a..b06fc42 100644 --- a/app/assets/config/manifest.js +++ b/app/assets/config/manifest.js @@ -2,3 +2,4 @@ //= link_directory ../stylesheets .css //= link_tree ../../javascript .js //= link_tree ../../../vendor/javascript .js +//= link_tree ../builds diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 288b9ab..b4e8067 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -13,3 +13,4 @@ *= require_tree . *= require_self */ + diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css new file mode 100644 index 0000000..8666d2f --- /dev/null +++ b/app/assets/stylesheets/application.tailwind.css @@ -0,0 +1,13 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +/* + +@layer components { + .btn-primary { + @apply py-2 px-4 bg-blue-200; + } +} + +*/ diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 217ac6d..69172fa 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -5,12 +5,15 @@ <%= csrf_meta_tags %> <%= csp_meta_tag %> + <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %> <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_importmap_tags %> - <%= yield %> +
+ <%= yield %> +
diff --git a/bin/dev b/bin/dev new file mode 100755 index 0000000..74ade16 --- /dev/null +++ b/bin/dev @@ -0,0 +1,8 @@ +#!/usr/bin/env sh + +if ! gem list foreman -i --silent; then + echo "Installing foreman..." + gem install foreman +fi + +exec foreman start -f Procfile.dev "$@" diff --git a/config/tailwind.config.js b/config/tailwind.config.js new file mode 100644 index 0000000..094432f --- /dev/null +++ b/config/tailwind.config.js @@ -0,0 +1,22 @@ +const defaultTheme = require('tailwindcss/defaultTheme') + +module.exports = { + content: [ + './public/*.html', + './app/helpers/**/*.rb', + './app/javascript/**/*.js', + './app/views/**/*.{erb,haml,html,slim}' + ], + theme: { + extend: { + fontFamily: { + sans: ['Inter var', ...defaultTheme.fontFamily.sans], + }, + }, + }, + plugins: [ + require('@tailwindcss/forms'), + require('@tailwindcss/aspect-ratio'), + require('@tailwindcss/typography'), + ] +}