Hi!
I am Japanese.
My English is poor, so I apologize if it is not clear.
This is a continuation of the question here.
I am using tailwindcss and daisyUI for the front end.
However, the app deployed in the production environment does not reflect and layout is broken.
I don’t know the cause.
Are there any codes that should be improved?
I have included the code that I believe is relevant to tailwindcss and daisyUI.
Gemfile :
gem 'cssbundling-rails'
gem "tailwindcss-rails"
config/tailwind.config.js :
module.exports = {
content: [
"../myapp/**/*.{html.erb, html, js}",
],
theme: {
extend: {
colors: {
},
},
},
plugins: [
require('daisyui'),
],
daisyui: {
themes: [
"bumblebee"
],
},
}
package.json :
{
"name": "sample_app",
"version": "1.0.0",
"main": "index.js",
"repository": "xxxxxxxxxxxxxxxxxxxxxxxxx",
"author": "xxxxxxxxxxxxxxxxxxxxxxxxx",
"license": "MIT",
"dependencies": {
"@hotwired/stimulus": "^3.2.1",
"tom-select": "^2.2.2"
},
"scripts": {
"build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/tailwind.css"
},
"packageManager": "yarn@1.22.19"
}
app/assets/stylesheets/application.tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn {
@apply py-2 px-4 bg-orange ;
}
}
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html data-theme="bumblebee">
<head>
<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "https://cdn.jsdelivr.net/npm/daisyui@2.14.1/dist/full.css" %>
</head>
</html>
