From bc2959dfb4c106da306ca1baa106f349965a00e7 Mon Sep 17 00:00:00 2001 From: Anton Date: Tue, 4 Apr 2023 11:25:58 +0200 Subject: [PATCH] Add new button styles and tailwind [SCI-7926] --- Gemfile | 2 ++ Gemfile.lock | 3 +++ app/assets/builds/.keep | 0 .../stylesheets/application.tailwind.css | 8 +++++++ app/views/layouts/application.html.erb | 1 + config/tailwind.config.js | 23 +++++++++++++++++++ docker-compose.yml | 18 +++++++++++++++ postcss.config.js | 1 + yarn.lock | 18 --------------- 9 files changed, 56 insertions(+), 18 deletions(-) create mode 100644 app/assets/builds/.keep create mode 100644 app/assets/stylesheets/application.tailwind.css create mode 100644 config/tailwind.config.js diff --git a/Gemfile b/Gemfile index e3554746a..f5318b9a3 100644 --- a/Gemfile +++ b/Gemfile @@ -101,6 +101,8 @@ gem 'graphviz' gem 'jsbundling-rails' +gem 'tailwindcss-rails', '~> 2.0' + gem 'base62' # Used for smart annotations gem 'newrelic_rpm' diff --git a/Gemfile.lock b/Gemfile.lock index 70054432c..a969c0290 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -619,6 +619,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) @@ -759,6 +761,7 @@ DEPENDENCIES simplecov sneaky-save! spinjs-rails + tailwindcss-rails (~> 2.0) timecop turbolinks (~> 5.1.1) tzinfo-data diff --git a/app/assets/builds/.keep b/app/assets/builds/.keep new file mode 100644 index 000000000..e69de29bb diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css new file mode 100644 index 000000000..9ec9ea257 --- /dev/null +++ b/app/assets/stylesheets/application.tailwind.css @@ -0,0 +1,8 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + + +html { + font-size: 16px; +} diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index bcb9e3dff..f1f217c99 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -10,6 +10,7 @@ <% end %> + <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %> <%= stylesheet_link_tag 'application', media: 'all' %> <%= javascript_include_tag 'jquery_bundle' %> diff --git a/config/tailwind.config.js b/config/tailwind.config.js new file mode 100644 index 000000000..9df20f7a1 --- /dev/null +++ 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') + ] +} diff --git a/docker-compose.yml b/docker-compose.yml index b096907b5..b19d568ed 100644 --- a/docker-compose.yml +++ b/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: diff --git a/postcss.config.js b/postcss.config.js index 95c4ee2fb..de3e37089 100644 --- a/postcss.config.js +++ b/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' diff --git a/yarn.lock b/yarn.lock index e0ce2d487..22d112548 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2676,11 +2676,6 @@ deprecation@^2.0.0, deprecation@^2.3.1: resolved "https://registry.yarnpkg.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919" integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ== -deprecation@^2.0.0, deprecation@^2.3.1: - version "2.3.1" - resolved "https://registry.yarnpkg.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919" - integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ== - des.js@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843" @@ -4426,14 +4421,6 @@ js-yaml@^3.12.0, js-yaml@^3.13.0, js-yaml@^3.13.1, js-yaml@^3.9.1: argparse "^1.0.7" esprima "^4.0.0" -js-yaml@^3.13.0: - version "3.14.1" - resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537" - integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g== - dependencies: - argparse "^1.0.7" - esprima "^4.0.0" - jsbn@~0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513" @@ -4699,11 +4686,6 @@ lodash.set@^4.3.2: resolved "https://registry.yarnpkg.com/lodash.set/-/lodash.set-4.3.2.tgz#d8757b1da807dde24816b0d6a84bea1a76230b23" integrity sha512-4hNPN5jlm/N/HLMCO43v8BXKq9Z7QdAGc/VGrRD61w8gN9g/6jF9A4L1pbUgBLCffi0w9VsXfTOij5x8iTyFvg== -lodash.set@^4.3.2: - version "4.3.2" - resolved "https://registry.yarnpkg.com/lodash.set/-/lodash.set-4.3.2.tgz#d8757b1da807dde24816b0d6a84bea1a76230b23" - integrity sha512-4hNPN5jlm/N/HLMCO43v8BXKq9Z7QdAGc/VGrRD61w8gN9g/6jF9A4L1pbUgBLCffi0w9VsXfTOij5x8iTyFvg== - lodash.sortby@^4.7.0: version "4.7.0" resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"