免费AI编程助手
在 Laravel 中安装 Tailwind CSS
创建您的工程
如果您还没有建立一个新的 Laravel 项目，请先创建一个新的项目。最常见的方法是使用 the Laravel Installer：
laravel new my-project
cd my-project接下来，使用 npm 安装 Laravel 的前端依赖关系。
npm install初始化 Tailwind CSS
Tailwind CSS 需要 Node.js 12.13.0 或更高版本。
通过 npm 安装 Tailwind
安装 Tailwind 以及其它依赖项:
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest创建您的配置文件
接下来，生成您的 tailwind.config.js 文件：
npx tailwindcss init这将会在您的项目根目录创建一个最小化的 tailwind.config.js 文件：
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}配置 Tailwind 来移除生产环境下没有使用到的样式声明
在您的 tailwind.config.js 文件中，配置 purge 选项指定所有的 Blade templates 和 JavaScript components 文件，使得 Tailwind 可以在生产构建中对未使用的样式进行摇树优化。
// tailwind.config.js
module.exports = {
purge: [],
purge: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}在 Laravel Mix 中配置 Tailwind
在您的 webpack.mix.js 中，添加 tailwindcss 作为 PostCSS 插件。
// webpack.mix.js
mix.js("resources/js/app.js", "public/js")
.postCss("resources/css/app.css", "public/css", [
require("tailwindcss"),
]);在您的 CSS 中引入 Tailwind
打开 Laravel 默认为您生成的 ./resources/css/app.css 文件 并使用 @tailwind 指令来包含 Tailwind的 base、 components 和 utilities 样式，来替换掉原来的文件内容。
/* ./resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;Tailwind 会在构建时将这些指令转换成所有基于您配置的设计系统生成的样式文件。
接下来，在您的主 Blade 布局（通常是 resources/views/layouts/app.blade.php 或类似）中导入您的样式表，并添加响应式视口元标记（如果它尚不存在）：
<!doctype html>
<head>
<!-- ... --->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<!-- ... --->您已经完成了所有步骤！现在，当您运行 npm run watch, npm run dev 或 npm run prod, Tailwind CSS 就可以在您的 Laravel Mix 项目中使用了。
更多建议：