我正在使用tailwind css沿着tailwind ui的rails 7项目的预构建组件。
我按照他们的ruby on rails指南安装了tailwind-https://tailwindcss.com/docs/guides/ruby-on-rails
一些实用程序类似乎正在工作。就像我可以改变我的导航链接的颜色使用实用类，但当我试图复制一些预先构建的组件从顺风ui，它不正确渲染
这就是我的应用程序主体的外观x1c 0d1x
这就是它目前的样子
下面是我的一些文件application.tailwind.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
/*
@layer components {
.btn-primary {
@apply py-2 px-4 bg-blue-200;
}
}
*/我的config/tailwind.css
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./public/*.html',
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
'./app/views/**/*',
'./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'),
]
}我的application.html.erb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kickconnect</title>
<%# <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> %>
<%= 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 class="prose mx-auto" >
<%= render partial:'home/newheader' %>
<div class=>
<%=notice%>
<%= yield %>
</div>
<%# <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> %>
</body>
</html>我几乎已经尝试了一切让它工作，但它不会妥善渲染。我试着运行“./bin/dev.”，没有改变任何事情。
1条答案
按热度按时间wwodge7n1#
当您更改文件时，预编译资源不会更改。
bin/rails assets:precompile是用于生产的，你不需要在开发中运行它。bin/rails assets:clobber删除预编译的资源。其余的是你可能不需要的细节，但知道这些是有用的：
bin/dev等于：这将启动你的rails服务器和tailwind watcher，在任何文件更改时编译你的css：
css:部分只是通过rails并从tailwindcss-railsgem运行一个rake任务，然后运行底层的tailwind命令：这就是为什么你在布局中包含
stylesheet_link_tag "tailwind"而不是“应用程序”。有两个地方可以处理这个请求^。第一个是
ActionDispatch::Static中间件（参见bin/rails middleware），它从public目录服务文件。这些资产优先，将首先得到服务。第二个是sprockets引擎，它安装在你的路由中。bin/rails assets:precompile-您只为生产部署执行此操作。它会编译你所有的资产，并把它们放在public/assets中（这些应该由你的web服务器处理，例如nginx）。public/assets中的文件在您更改文件时不会更新，除非您再次运行预编译。bin/rails assets:clobber-只删除public/assets目录。现在您没有该目录，您的资产请求可以点击
sprockets引擎，该引擎将动态编译资产并提供新的和更新的资产。这样，当您进行更改时，您的资源始终会更新，在本例中是更新的tailwind.css文件。同样需要说明的是，
app/assets/stylesheets/application.tailwind.css首先由tailwind编译，然后sprockets将app/builds/tailwind.css连接到rails生命周期中。