Tailwind 没有在新的 laravel 项目上工作
Posted
技术标签:
【中文标题】Tailwind 没有在新的 laravel 项目上工作【英文标题】：Tailwind is not working on a new laravel project 【发布时间】：2021-09-26 01:06:53 【问题描述】：我刚刚使用 Jetstream 入门套件安装了一个干净的 Laravel 项目，因此它还安装了 Tailwind CSS。
然后我尝试使用 Tailwind 的示例代码，但它不会显示。
这是我来自 Tailwind 文档的简单测试代码：（来自 https://tailwindcss.com/docs/hover-focus-and-other-states）
app.blade.php：（你可以运行代码sn-p，因为这实际上是我在我的项目中得到的）
<!DOCTYPE html>
<html lang=" str_replace('_', '-', app()->getLocale()) ">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content=" csrf_token() ">
<title> config('app.name', 'Laravel') </title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href=" mix('css/app.css') ">
<!-- Scripts -->
<script src=" mix('js/app.js') " defer></script>
</head>
<body class="font-sans antialiased">
<button class="bg-red-500 hover:bg-red-700">
Hover me
</button>
</body>
</html>这是tailwind.config.js 文件：
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports =
mode: 'jit',
purge: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.vue',
],
theme:
extend:
fontFamily:
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
,
,
,
variants:
extend:
opacity: ['disabled'],
,
,
plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
;
这是webpack.mix.js 文件：
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
])
.webpackConfig(require('./webpack.config'));
if (mix.inProduction())
mix.version();
这是app.css 文件：
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
【问题讨论】：
【参考方案1】：运行 npm run dev 或 npm run watch 来编译资产（如果您还没有）。
【讨论】：
是的！而且 Tailwind 文档也没有显示创建在他们网站上看到的元素的整个 tailwind 类 - 所以你实际上需要复制整个元素来获得你在屏幕上看到的真实代码！ （例如，我在 Google Chrome 上执行“用鼠标右键单击 > 检查 > 复制 > 复制元素”）以上是关于Tailwind 没有在新的 laravel 项目上工作的主要内容，如果未能解决你的问题，请参考以下文章
尝试使用 Laravel Mix 将 Tailwind CSS 添加到 Wordpress 项目时出现“未找到模块”
Tailwind CSS Laravel Mix 错误 - 强制安装 PostCSS 8
我正在使用 Bootstrap 和 Tailwind CSS 开发 Laravel。我的tailwindcss没有被选中
只有根路径在新的 Laravel-8 安装中有效，所有其他都给 404