如何在 Laravel 8 中安装完整的 tailwind-css 属性

Question

我正在尝试将 Tailwind CSS v2.0 安装到干净的 Laravel 安装中，但它没有安装完整的 css 属性，例如 .p-2 和其他属性我正在关注官方安装 https://tailwindcss.com/docs/guides/laravel 但仍然不是

webpack.mix.js

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

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

tailwind.config.js

module.exports = {
  content: [
      "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

\resources\css\app.css

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

Answer 1

最近 Tailwindcss 更新了他们的框架 (v3.0.7)，其中 css 文件是在 purgecss(https://purgecss.com/) 中下载的，这就是你无法下载的原因tailwindcss.

的所有类和属性

为此，您可以下载 tailwind 的降级版本css，您甚至可以在自定义文件夹中下载它，甚至 Laravel。

首先，运行 laravel new your_project_name 在您的终端中，
运行 npm install 或 npm i 在您的终端上
运行 cd/your_project_name 在您的终端
运行 npm install -D tailwindcss@^1.9.2 在您的终端
然后转到您的项目文件夹并在 vs 代码或任何代码编辑器上打开它
在你的代码中添加以下代码

mix.js('resources/js/app.js', 'public/js')

.postCss('resources/css/app.css', 'public/css', [

    require('tailwindcss'),

]);

在resources\css\app.css
中添加以下代码
@tailwind base;

@tailwind components;

@tailwind utilities;
last 运行 npm run dev in your cmd

谢谢。

Answer 2

检查您是否运行 npm run prod，因为这会清除您的 css 文件并删除未使用的样式。

运行 npm run dev 看看是否有帮助。

如何在 Laravel 8 中安装完整的 tailwind-css 属性

how to install complete tailwind-css properties in Laravel 8

laravel

tailwind-css

laravel-8