Add tailwind

b5c123a5 · Teal · ad5c5d44 · b5c123a5 · b5c123a5 · b5c123a5
Commit b5c123a5 authored May 23, 2024 by Teal
--- 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
--- a/Gemfile
+++ b/Gemfile
@@ -18,7 +18,7 @@ gem "puma", ">= 5.0"
 gem "jbuilder"

 # Use Redis adapter to run Action Cable in production
-# gem "redis", ">= 4.0.1"
+gem "redis", ">= 4.0.1"

 # Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis]
 # gem "kredis"
@@ -59,3 +59,5 @@ end

 gem "solid_queue"
 gem "httparty"
+
+gem "tailwindcss-rails", "~> 2.6"
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -198,6 +198,10 @@ GEM
    rake (13.2.0)
    rdoc (6.6.3.1)
      psych (>= 4.0.0)
+    redis (5.2.0)
+      redis-client (>= 0.22.0)
+    redis-client (0.22.2)
+      connection_pool
    regexp_parser (2.9.0)
    reline (0.5.0)
      io-console (~> 0.5)
@@ -225,6 +229,12 @@ GEM
    sqlite3 (1.7.3-arm64-darwin)
    sqlite3 (1.7.3-x86_64-linux)
    stringio (3.1.0)
+    tailwindcss-rails (2.6.0-aarch64-linux)
+      railties (>= 7.0.0)
+    tailwindcss-rails (2.6.0-arm64-darwin)
+      railties (>= 7.0.0)
+    tailwindcss-rails (2.6.0-x86_64-linux)
+      railties (>= 7.0.0)
    thor (1.3.1)
    timeout (0.4.1)
    tzinfo (2.0.6)
@@ -256,10 +266,12 @@ DEPENDENCIES
  jbuilder
  puma (>= 5.0)
  rails (~> 7.1.2)
+  redis (>= 4.0.1)
  selenium-webdriver
  solid_queue
  sprockets-rails
  sqlite3 (~> 1.4)
+  tailwindcss-rails (~> 2.6)
  tzinfo-data
  web-console


--- a/Procfile.dev
+++ b/Procfile.dev
+web: bin/rails server
+css: bin/rails tailwindcss:watch
--- a/app/assets/builds/.keep
+++ b/app/assets/builds/.keep
--- a/app/assets/config/manifest.js
+++ b/app/assets/config/manifest.js
 //= link_tree ../images
 //= link_directory ../stylesheets .css
+//= link_tree ../builds
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+
+@layer components {
+  .btn-primary {
+    @apply py-2 px-4 bg-blue-200;
+  }
+}
+
+*/
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -5,11 +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" %>
  </head>

  <body>
+    <main class="container mx-auto mt-28 px-5 flex">
      <%= yield %>
+    </main>
  </body>
 </html>
--- a/bin/dev
+++ b/bin/dev
+#!/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 "$@"
--- a/config/tailwind.config.js
+++ b/config/tailwind.config.js
+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/typography'),
+    require('@tailwindcss/container-queries'),
+  ]
+}