Laravel 8 在 HTML 标签中提供我的 Tailwind CSS 文件

Posted 2023-03-06

技术标签:

【中文标题】Laravel 8 在 HTML 标签中提供我的 Tailwind CSS 文件【英文标题】：Laravel 8 serve my Tailwind CSS file in HTML tags 【发布时间】：2021-07-12 18:56:39 【问题描述】：

我正在尝试将 Tailwind 应用到全新的 Laravel 安装中。我已经关注了Tailwind: Install with Laravel 和Laravel: Tailwind CSS 两个网站上的文档

我的配置是这样的。

/tailwind.config.js

module.exports = 
  purge: [
     './storage/framework/views/*.php',
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
    ],
  darkMode: false, // or 'media' or 'class'
  theme: 
    extend: ,
  ,
  variants: 
    extend: ,
  ,
  plugins: [],

/resources/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ]);

/resources/views/welcome.blade.php

// Calling the stylesheet like this
<link href=" asset('css/app.css') " rel="stylesheet">

问题当我试图查看我的 CSS 文件的源代码时，它位于 html 标记中，而不是原始 CSS 代码中。

查看源代码：https://example.com/css/app.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    ...
    <style>
    // CSS code is here
    </style>
    ....
</html>

问题关于 CSS 文件无法正确提供的原因以及如何解决此问题的任何提示？

【问题讨论】：

我了解到https://example.com/css/app.css的内容和你的索引一样，包含<html lang...>...是吗？您如何访问您的应用程序？ nginx, apache php artisan serve .. ?此外，只是为了确定； /yourproject/public/css/app.css 包含你的 CSS 吗？ 【参考方案1】：

经过几个小时的疯狂搜索，我发现以下命令是解决方案，我觉得很奇怪，在 laravel 或 tailwind 的官方文档中没有提到它。

npm install && npm run dev

现在 CSS 可以正常提供了。

【讨论】：

以上是关于Laravel 8 在 HTML 标签中提供我的 Tailwind CSS 文件的主要内容，如果未能解决你的问题，请参考以下文章