Add some styles using tailwindcss

.gitignore

@@ -42,3 +42,6 @@ node_modules
 # https://vitejs.dev/guide/env-and-mode.html#env-files
 *.local
 
+
+/app/assets/builds/*
+!/app/assets/builds/.keep

Gemfile

@@ -80,3 +80,5 @@ group :development do
 end
 
 gem "dockerfile-rails", ">= 1.2", :group => :development
+
+gem "tailwindcss-rails", "~> 2.7"

Gemfile.lock

@@ -115,7 +115,6 @@ GEM
     factory_bot_rails (6.4.3)
       factory_bot (~> 6.4)
       railties (>= 5.0.0)
-    foreman (0.88.1)
     globalid (1.2.1)
       activesupport (>= 6.1)
     i18n (1.14.5)
@@ -271,6 +270,18 @@ GEM
       railties (>= 6.0.0)
     stringio (3.1.1)
     strscan (3.1.0)
+    tailwindcss-rails (2.7.3)
+      railties (>= 7.0.0)
+    tailwindcss-rails (2.7.3-aarch64-linux)
+      railties (>= 7.0.0)
+    tailwindcss-rails (2.7.3-arm-linux)
+      railties (>= 7.0.0)
+    tailwindcss-rails (2.7.3-arm64-darwin)
+      railties (>= 7.0.0)
+    tailwindcss-rails (2.7.3-x86_64-darwin)
+      railties (>= 7.0.0)
+    tailwindcss-rails (2.7.3-x86_64-linux)
+      railties (>= 7.0.0)
     thor (1.3.1)
     timeout (0.4.1)
     turbo-rails (2.0.6)
@@ -316,7 +327,6 @@ DEPENDENCIES
   dockerfile-rails (>= 1.2)
   dotenv-rails
   factory_bot_rails
-  foreman
   jbuilder
   jsbundling-rails
   pg (~> 1.5)
@@ -326,6 +336,7 @@ DEPENDENCIES
   rubocop-rails
   sprockets-rails
   stimulus-rails
+  tailwindcss-rails (~> 2.7)
   turbo-rails
   tzinfo-data
   vite_rails

Procfile.dev

@@ -1,3 +1,4 @@
 
 vite: bin/vite dev
 web: bin/rails s -p 3000 -b 0.0.0.0
+css: bin/rails tailwindcss:watch[always]

app/assets/config/manifest.js

@@ -1,2 +1,3 @@
 //= link_tree ../images
 //= link_directory ../stylesheets .css
+//= link_tree ../builds

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;
+  }
+}
+
+*/

app/frontend/components/ApplicationEditView.vue

@@ -50,17 +50,18 @@ export default {
 </script>
 
 <template>
+  <h2 class="text-3xl my-6">Edition of {{ app.name }}</h2>
   <form @submit.prevent="onSubmit">
-    <div>
-      <label for="name">Name</label>
+    <div class="my-2">
+      <label for="name" class="inline-block w-32">Name</label>
       <input type="text" id="name" v-model="app.name" />
     </div>
-    <div>
-      <label for="description">Description</label>
+    <div class="my-2">
+      <label for="description" class="inline-block w-32 align-top">Description</label>
       <textarea id="description" v-model="app.description"></textarea>
     </div>
-    <button type="submit">Save</button>
-    <p><router-link :to="{ name: 'Application', params: { id: app.id } }">Cancel</router-link></p>
+    <button type="submit"  class="px-4 py-2 mx-2 border-solid border-2 rounded-md shadow-md border-sky-600 bg-sky-100 hover:border-sky-800 hover:bg-sky-200 active:bg-sky-50 active:border-sky-400 active:shadow-none active:shadow-inner">Save</button>
+    <router-link :to="{ name: 'Application', params: { id: app.id } }" class="text-sky-600 hover:text-sky-900 hover:underline">Cancel</router-link>
   </form>
   <ErrorMessage :error="error"></ErrorMessage>
 </template>

app/frontend/components/ApplicationView.vue

@@ -49,10 +49,12 @@ export default {
 </script>
 
 <template>
-  <h2>{{ app.name }}</h2>
-  <p>{{ app.description }}</p>
-  <p><router-link :to="{ name: 'ApplicationEdit', params: { id: app.id } }">Edit</router-link></p>
-  <p><button @click="onDestroy">Destroy</button></p>
+  <h2 class="text-3xl my-6">{{ app.name }}</h2>
+  <p class="my-2">{{ app.description }}</p>
+  <div class="my-2">
+    <router-link class="inline-block m-2 text-sky-600 hover:text-sky-900 hover:underline" to="/">Back</router-link>
+    <router-link class="inline-block m-2 text-sky-600 hover:text-sky-900 hover:underline" :to="{ name: 'ApplicationEdit', params: { id: app.id } }">Edit</router-link>
+    <button class="m-2 px-4 py-2 border-solid border-2 rounded-md shadow-md border-red-600 bg-red-100 hover:border-red-800 hover:bg-red-200 active:bg-red-50 active:border-red-400 active:shadow-none active:shadow-inner" @click="onDestroy">Destroy</button>
+  </div>
   <ErrorMessage :error="error"></ErrorMessage>
-  <p><router-link to="/">back</router-link></p>
 </template>

app/frontend/components/ErrorMessage.vue

@@ -5,9 +5,9 @@ defineProps({
 </script>
 
 <template>
-  <ul v-if="error.errors">
+  <ul class="my-6 text-red-800" v-if="error.errors">
     <li v-for="(errors, attributeName) in error.errors">
-      {{ attributeName }}: {{ errors.join(",") }}
+      <strong>{{ attributeName }}</strong>: {{ errors.join(",") }}
     </li>
   </ul>
 </template>

app/frontend/components/HomeView.vue

@@ -46,25 +46,25 @@ export default {
 </script>
 
 <template>
-  <h2>Applications</h2>
-  <ul>
+  <h2 class="text-3xl my-6">Applications</h2>
+  <ul class="my-6">
     <li v-for="app in apps" :key="app.id">
-      <router-link :to="{ name: 'Application', params: { id: app.id } }">
+      <router-link class="text-sky-600 hover:text-sky-900 hover:underline" :to="{ name: 'Application', params: { id: app.id } }">
         {{ app.name }}
       </router-link>
     </li>
   </ul>
-  <h3>New application</h3>
+  <h3 class="text-2xl my-6">New application</h3>
   <form @submit.prevent="onSubmitNewApp">
-    <div>
-      <label for="name">Name</label>
-      <input type="text" id="name" v-model="newApp.name" />
+    <div class="my-2">
+      <label for="name" class="inline-block w-32">Name</label>
+      <input type="text" class="w-96" id="name" v-model="newApp.name" />
     </div>
-    <div>
-      <label for="description">Description</label>
-      <textarea id="description" v-model="newApp.description"></textarea>
+    <div class="my-2">
+      <label for="description" class="inline-block w-32 align-top">Description</label>
+      <textarea id="description" class="w-96" v-model="newApp.description"></textarea>
     </div>
-    <button type="submit">Save</button>
+    <button type="submit" class="px-4 py-2 border-solid border-2 rounded-md shadow-md border-sky-600 bg-sky-100 hover:border-sky-800 hover:bg-sky-200 active:bg-sky-50 active:border-sky-400 active:shadow-none active:shadow-inner">Save</button>
   </form>
   <ErrorMessage :error="error"></ErrorMessage>
 </template>

app/views/layouts/application.html.erb

@@ -5,13 +5,14 @@
     <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" %>
     <%= vite_client_tag %>
     <%= vite_javascript_tag 'application' %>
   </head>
 
   <body>
-    <div id="app"></div>
+    <div id="app" class="container mx-auto"></div>
   </body>
 </html>

bin/dev

@@ -0,0 +1,16 @@
+#!/usr/bin/env sh
+
+if ! gem list foreman -i --silent; then
+  echo "Installing foreman..."
+  gem install foreman
+fi
+
+# Default to port 3000 if not specified
+export PORT="${PORT:-3000}"
+
+# Let the debug gem allow remote connections,
+# but avoid loading until `debugger` is called
+export RUBY_DEBUG_OPEN="true"
+export RUBY_DEBUG_LAZY="true"
+
+exec foreman start -f Procfile.dev "$@"

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}',
+    './app/frontend/**/*.{vue,js}'
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+    require('@tailwindcss/container-queries'),
+  ]
+}