From cafe820a64c20d13c8cff9aff738fdd5db04b52d Mon Sep 17 00:00:00 2001 From: songtianlun Date: Thu, 16 Jan 2025 18:17:08 +0800 Subject: [PATCH] feat: add tailwindcss integration and demo page - Add tailwindcss-rails gem to Gemfile - Create application.tailwind.css for Tailwind styles - Update Procfile.dev for Tailwind CSS watch command - Add demo action and view for showcasing features - Update application layout to use Tailwind CSS classes - Refactor footer and header for improved styling This commit introduces Tailwind CSS for styling the application, enhancing the UI with utility-first CSS. A new demo page is also added to showcase the application features. --- Gemfile | 2 + Gemfile.lock | 9 + Procfile.dev | 2 +- app/assets/config/manifest.js | 1 + app/assets/images/music.svg | 1 + .../stylesheets/application.bootstrap.scss | 2 +- .../stylesheets/application.tailwind.css | 31 + app/controllers/static_pages_controller.rb | 3 + app/javascript/application.js | 8 +- app/views/layouts/_footer.html.erb | 50 +- app/views/layouts/_header.html.erb | 104 +- app/views/layouts/application.html.erb | 40 +- app/views/static_pages/demo.html.erb | 10 + bin/dev | 9 +- config/routes.rb | 8 +- config/tailwind.config.js | 25 + package-lock.json | 1032 ++++++++++++++++- package.json | 2 + yarn.lock | 764 +++++++++--- 19 files changed, 1851 insertions(+), 252 deletions(-) create mode 100644 app/assets/images/music.svg create mode 100644 app/assets/stylesheets/application.tailwind.css create mode 100644 app/views/static_pages/demo.html.erb create mode 100644 config/tailwind.config.js diff --git a/Gemfile b/Gemfile index 69d3fde..8a6b448 100644 --- a/Gemfile +++ b/Gemfile @@ -77,3 +77,5 @@ gem "jsbundling-rails", "~> 1.3" group :production do gem "pg", "~> 1.5" end + +gem "tailwindcss-rails", "~> 3.2" diff --git a/Gemfile.lock b/Gemfile.lock index 05c97de..c52afdc 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -385,6 +385,14 @@ GEM stimulus-rails (1.3.4) railties (>= 6.0.0) stringio (3.1.2) + tailwindcss-rails (3.2.0) + railties (>= 7.0.0) + tailwindcss-ruby + tailwindcss-ruby (3.4.17-aarch64-linux) + tailwindcss-ruby (3.4.17-arm-linux) + tailwindcss-ruby (3.4.17-arm64-darwin) + tailwindcss-ruby (3.4.17-x86_64-darwin) + tailwindcss-ruby (3.4.17-x86_64-linux) thor (1.3.2) thruster (0.1.10) thruster (0.1.10-aarch64-linux) @@ -455,6 +463,7 @@ DEPENDENCIES solid_queue sqlite3 (>= 2.1) stimulus-rails + tailwindcss-rails (~> 3.2) thruster turbo-rails tzinfo-data diff --git a/Procfile.dev b/Procfile.dev index 6e11fb6..85d95f2 100644 --- a/Procfile.dev +++ b/Procfile.dev @@ -1,3 +1,3 @@ web: env RUBY_DEBUG_OPEN=true bin/rails server -css: yarn watch:css js: yarn build --watch +css: bin/rails tailwindcss:watch diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js index 640221f..7565b28 100644 --- a/app/assets/config/manifest.js +++ b/app/assets/config/manifest.js @@ -1,2 +1,3 @@ //= link_tree ../images // = link_tree ../builds +//= link_tree ../builds diff --git a/app/assets/images/music.svg b/app/assets/images/music.svg new file mode 100644 index 0000000..a9a5365 --- /dev/null +++ b/app/assets/images/music.svg @@ -0,0 +1 @@ + diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss index 38496d0..f8a06ff 100644 --- a/app/assets/stylesheets/application.bootstrap.scss +++ b/app/assets/stylesheets/application.bootstrap.scss @@ -1,3 +1,3 @@ @import 'bootstrap/dist/css/bootstrap'; @import 'bootstrap-icons/font/bootstrap-icons'; -@import './custom'; \ No newline at end of file +//@import './custom'; \ No newline at end of file diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css new file mode 100644 index 0000000..9fdd6e3 --- /dev/null +++ b/app/assets/stylesheets/application.tailwind.css @@ -0,0 +1,31 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +/* + +@layer components { + .btn-primary { + @apply py-2 px-4 bg-blue-200; + } +} + +*/ + +@layer base { + h1, h2, h3, h4, h5, h6 { + @apply leading-none; + } + + h1 { + @apply text-[3em] tracking-[-2px] mb-[30px] text-center; + } + + h2 { + @apply text-[1.2em] tracking-[-1px] mb-[30px] text-center font-normal text-gray-400; + } + + p { + @apply text-[1.1em] leading-[1.7]; + } +} \ No newline at end of file diff --git a/app/controllers/static_pages_controller.rb b/app/controllers/static_pages_controller.rb index d304760..6d4f29d 100644 --- a/app/controllers/static_pages_controller.rb +++ b/app/controllers/static_pages_controller.rb @@ -10,4 +10,7 @@ class StaticPagesController < ApplicationController def contact end + + def demo + end end diff --git a/app/javascript/application.js b/app/javascript/application.js index ab3caa9..3ef406c 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -1,10 +1,12 @@ // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails import "@hotwired/turbo-rails" -import './add_jquery' +// import './add_jquery' -import "jquery/dist/jquery" -import "bootstrap/dist/js/bootstrap" +// import "jquery/dist/jquery" +// import "bootstrap/dist/js/bootstrap" + +import "flowbite/dist/flowbite.turbo" import "./controllers" diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb index 4c2be8d..f6d0c10 100644 --- a/app/views/layouts/_footer.html.erb +++ b/app/views/layouts/_footer.html.erb @@ -1,13 +1,39 @@ -