Tailwind 没有在新的 laravel 项目上工作

Question

我刚刚使用 Jetstream 初学者工具包安装了一个干净的 Laravel 项目，所以它也安装了 Tailwind CSS。

然后我尝试使用 Tailwind 中的示例代码，但它不会显示。

这是我来自 Tailwind 文档的简单测试代码：（来自 https://tailwindcss.com/docs/hover-focus-and-other-states）

app.blade.php：（您可以运行代码片段，因为这实际上是我在项目中得到的）

<!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';

Answer 1

运行 npm run dev 或 npm run watch 编译资产（如果您还没有的话）。

Answer 2

你应该先运行这个命令 npm run dev 然后运行 php artisan serve

Tailwind 没有在新的 laravel 项目上工作

Tailwind is not working on a new laravel project

html

laravel

tailwind-css