install tailwind

corsego · Jan 1, 2024 · 9d47f5d · 9d47f5d
1 parent 1b70c11
commit 9d47f5d
Show file tree

Hide file tree

Showing 12 changed files with 67 additions and 8 deletions.
diff --git a/.gitignore b/.gitignore
@@ -33,3 +33,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
@@ -65,3 +65,5 @@ group :test do
   gem "capybara"
   gem "selenium-webdriver"
 end
+
+gem "tailwindcss-rails", "~> 2.1"
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -220,6 +220,12 @@ GEM
     stimulus-rails (1.3.0)
       railties (>= 6.0.0)
     stringio (3.1.0)
+    tailwindcss-rails (2.1.0-aarch64-linux)
+      railties (>= 6.0.0)
+    tailwindcss-rails (2.1.0-arm64-darwin)
+      railties (>= 6.0.0)
+    tailwindcss-rails (2.1.0-x86_64-linux)
+      railties (>= 6.0.0)
     thor (1.3.0)
     timeout (0.4.1)
     turbo-rails (1.5.0)
@@ -260,6 +266,7 @@ DEPENDENCIES
   sprockets-rails
   sqlite3 (~> 1.4)
   stimulus-rails
+  tailwindcss-rails (~> 2.1)
   turbo-rails
   tzinfo-data
   web-console

diff --git a/Procfile.dev b/Procfile.dev
@@ -0,0 +1,2 @@
+web: env RUBY_DEBUG_OPEN=true bin/rails server -p 3000
+css: bin/rails tailwindcss:watch
diff --git a/app/assets/builds/.keep b/app/assets/builds/.keep
diff --git 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.tailwind.css 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/events/_event.html.erb b/app/views/events/_event.html.erb
@@ -1,4 +1,4 @@
-<div id="<%= dom_id event %>">
+<div id="<%= dom_id event %>" class="border">
   <p>
     <strong>Name:</strong>
     <%= event.name %>
@@ -14,4 +14,5 @@
     <%= event.start_date %>
   </p>
 
+  <%= link_to "Show this event", event %>
 </div>
diff --git a/app/views/events/index.html.erb b/app/views/events/index.html.erb
@@ -1,14 +1,10 @@
 <p style="color: green"><%= notice %></p>
 
 <h1>Events</h1>
+<%= link_to "New event", new_event_path %>
 
-<div id="events">
+<div id="events" class="space-y-4">
   <% @events.each do |event| %>
     <%= render event %>
-    <p>
-      <%= link_to "Show this event", event %>
-    </p>
   <% end %>
 </div>
-
-<%= link_to "New event", new_event_path %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -5,12 +5,15 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <%= 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 %>
   </head>
 
   <body>
-    <%= yield %>
+    <main class="p-8">
+      <%= yield %>
+    </main>
   </body>
 </html>
diff --git a/bin/dev 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
@@ -0,0 +1,23 @@
+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'),
+    require('@tailwindcss/container-queries'),
+  ]
+}