Merge pull request #5317 from aignatov-bio/ai-sci-7926-add-new-buttons-tyle

Add tailwind [SCI-7926]

Gemfile

@@ -104,6 +104,8 @@ gem 'graphviz'
 
 gem 'jsbundling-rails'
 
+gem 'tailwindcss-rails', '~> 2.0'
+
 gem 'base62' # Used for smart annotations
 gem 'newrelic_rpm'
 

Gemfile.lock

@@ -623,6 +623,8 @@ GEM
       sprockets (>= 3.0.0)
     stream (0.5.3)
       generator
+    tailwindcss-rails (2.0.27)
+      railties (>= 6.0.0)
     thor (1.2.1)
     tilt (2.0.10)
     timecop (0.9.2)
@@ -764,6 +766,7 @@ DEPENDENCIES
   simplecov
   sneaky-save!
   spinjs-rails
+  tailwindcss-rails (~> 2.0)
   timecop
   turbolinks (~> 5.1.1)
   tzinfo-data

app/assets/stylesheets/application.tailwind.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+html {
+  font-size: 16px;
+}

app/views/layouts/application.html.erb

@@ -10,6 +10,7 @@
       <meta name="expiration-url" content="<%= users_expire_in_path %>">
       <meta name="revive-url" content="<%= users_revive_session_path %>">
     <% end %>
+    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag 'application', media: 'all' %>
 
     <%= javascript_include_tag 'jquery_bundle' %>

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')
+  ]
+}

docker-compose.yml

@@ -52,6 +52,24 @@ services:
       - scinote_development_bundler:/usr/local/bundle/
       - scinote_development_files:/usr/src/app/public/system
 
+  tailwind:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    image: scinote_web_development
+    container_name: scinote_tailwind_development
+    stdin_open: true
+    tty: true
+    command: >
+      bash -c "rails tailwindcss:watch"
+    environment:
+      - RAILS_ENV=development
+      - NODE_ENV=development
+    volumes:
+      - .:/usr/src/app
+      - scinote_development_bundler:/usr/local/bundle/
+      - scinote_development_files:/usr/src/app/public/system
+
 volumes:
   scinote_development_postgres:
   scinote_development_bundler:

postcss.config.js

@@ -2,6 +2,7 @@ module.exports = {
   plugins: [
     require('postcss-import'),
     require('postcss-flexbugs-fixes'),
+    require('tailwindcss'),
     require('postcss-preset-env')({
       autoprefixer: {
         flexbox: 'no-2009'