Laravel + Tailwindcss 1.8.7：如何安装
Posted
技术标签:
【中文标题】Laravel + Tailwindcss 1.8.7：如何安装【英文标题】：Laravel + Tailwindcss 1.8.7: How to Install 【发布时间】：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.好的。道歉。会这样做的。 【参考方案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
【讨论】：
以上是关于Laravel + Tailwindcss 1.8.7：如何安装的主要内容，如果未能解决你的问题，请参考以下文章
Laravel Mix、TailwindCSS 和 PurgeCSS
我正在使用 Bootstrap 和 Tailwind CSS 开发 Laravel。我的tailwindcss没有被选中
Laravel - 将 TailwindCSS 样式的视图输出为 PDF
Laravel 中的 Tailwind 3 给出：错误：PostCSS 插件 tailwindcss 需要 PostCSS 8