Tailwind init

This commit is contained in:
Joshua Coles 2023-09-29 17:52:01 +01:00
parent f49dd9a882
commit 7cf23e872e
10 changed files with 59 additions and 1 deletions

3
.gitignore vendored
View File

@ -32,3 +32,6 @@
# IDE config
/.idea
/app/assets/builds/*
!/app/assets/builds/.keep

View File

@ -70,3 +70,5 @@ group :test do
gem "selenium-webdriver"
gem "webdrivers"
end
gem "tailwindcss-rails", "~> 2.0"

View File

@ -189,6 +189,8 @@ GEM
stimulus-rails (1.2.2)
railties (>= 6.0.0)
stringio (3.0.8)
tailwindcss-rails (2.0.30-arm64-darwin)
railties (>= 6.0.0)
thor (1.2.2)
timeout (0.4.0)
turbo-rails (1.4.0)
@ -230,6 +232,7 @@ DEPENDENCIES
selenium-webdriver
sprockets-rails
stimulus-rails
tailwindcss-rails (~> 2.0)
turbo-rails
tzinfo-data
web-console

2
Procfile.dev Normal file
View File

@ -0,0 +1,2 @@
web: bin/rails server -p 3000
css: bin/rails tailwindcss:watch

0
app/assets/builds/.keep Normal file
View File

View File

@ -2,3 +2,4 @@
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js
//= link_tree ../builds

View File

@ -0,0 +1,13 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/*
@layer components {
.btn-primary {
@apply py-2 px-4 bg-blue-200;
}
}
*/

View File

@ -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="container mx-auto mt-28 px-5 flex">
<%= yield %>
</main>
</body>
</html>

8
bin/dev Executable file
View File

@ -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 "$@"

23
config/tailwind.config.js Normal file
View File

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