文章/答案/技术大牛

发布

社区首页 >问答首页 >Laravel + Tailwindcss 1.8.7:如何安装

问Laravel + Tailwindcss 1.8.7:如何安装
EN

Stack Overflow用户

提问于 2020-09-29 03:24:49

回答 3查看 974关注 0票数 1

在安装旧版本的尾风之前，我没有任何问题。我不知道我做错了什么。请帮帮忙。这是我迄今所做的，但并不奏效：

通过npm

npm install tailwindcss

resources/sass/app.scss

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

创建尾风配置文件

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') ],
    });

即welcome.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>

laravel

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-11-12 10:20:25

要在拉拉中实现尾风，你需要

-1通过国家预防机制安装尾风

npm install tailwindcss

-2 app.scss中的导入样式

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

-3创建裁剪器配置文件

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安装尾风用户界面

npm install @tailwindcss/ui

-6最后编译代码

npm run dev

票数 0

Stack Overflow用户

发布于 2020-09-29 21:35:56

找到了这个解决方案：

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

Stack Overflow用户

发布于 2020-09-29 03:53:45

您的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'],
    },
};

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64112426

复制

相似问题

问Laravel + Tailwindcss 1.8.7:如何安装
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Laravel + Tailwindcss 1.8.7:如何安装EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Laravel + Tailwindcss 1.8.7:如何安装
EN