Laravel + Tailwindcss 1.8.7：如何安装答案

【问题标题】：Laravel + Tailwindcss 1.8.7: How to InstallLaravel + Tailwindcss 1.8.7：如何安装
【发布时间】：2021-01-14 15:23:00
【问题描述】：

安装旧版本的tailwindcss之前我没有问题。我不确定我做错了什么。请帮忙。这是我到目前为止所做的，但它不起作用：

通过 npm

npm install tailwindcss

resources/sass/app.scss

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

创建 Tailwind 配置文件

npx tailwindcss init

webpack.mix.js

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

const tailwindcss = require('tailwindcss');

mix.sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [ tailwindcss('tailwind.config.js') ],
    });

即欢迎.php

<!doctype html>
<html lang="en">
<head>
    <title>Document</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body class="bg-purple 400"> //Does not work

    </div>
</body>
</html>

【问题讨论】：

O.好的。道歉。会这样做的。

标签： laravel

【解决方案1】：

找到了这个解决方案：

https://medium.com/@larapeak/setup-tailwindcss-in-laravel-7-x-94d78ebc9109

webpack.mix.js

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

mix.js('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css')
    .options({
      processCssUrls: false,
      postCss: [ tailwindcss('./tailwind.config.js') ],
    });

【讨论】：

【解决方案2】：

您的webpack.mix.js 文件应如下所示：

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

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

还有你的tailwind.config.js 文件：

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    purge: [
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    variants: {
        opacity: ['responsive', 'hover', 'focus', 'disabled'],
    },
};

【讨论】：

感谢您的回复。我按照你的指示做了，但还是不行。

【解决方案3】：

要在 laravel 中实现 tailwindcss，你需要

-1 通过 npm 安装 Tailwind

npm install tailwindcss

-2 app.scss中的导入样式

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

-3 创建tailwindcss配置文件

npx tailwindcss init

-4 在你的tailwind.config.js 中添加这段代码

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    purge: [

        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    variants: {
        opacity: ['responsive', 'hover', 'focus', 'disabled'],
    },

    plugins: [require('@tailwindcss/ui')],
};

-5 安装tailwindcss ui

npm install @tailwindcss/ui

-6 终于编译你的代码了

npm run dev

【讨论】：