tailwindcss 是一个 CSS 框架，在 laravel 通过工程化的方式引入 tailwindcss，用到如下方法：
初始化 laravel 项目
|
1 |
laravel new tailwindcss-demo |
安装依赖
|
1 |
npm install -D tailwindcss postcss autoprefixer |
生成 tailwindcss 配置文件
|
1 |
npx tailwindcss init -p |
修改 tailwindcss 默认配置
|
1 2 3 4 5 6 7 8 9 10 |
module.exports = { content: [ "./resources/**/*.blade.php", "./resources/**/*.js", ], theme: { extend: {}, }, plugins: [], } |
在 tailwindcss.config.js 中，主要是指定 blade 和 js 文件做为输入，因为可能会在 js 或者 blade 中用到 tailwindcss 的样式信息
修改 vite 配置
|
1 2 3 4 5 6 7 8 9 10 11 |
import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; export default defineConfig({ plugins: [ laravel({ input: ['resources/js/app.js'], refresh: true, }), ], }); |
在 vite.config.js 中，指定输入为 app.js
引入 tailwindcss
在 app.css 中，引入tailwindcss
|
1 2 3 |
@tailwind base; @tailwind components; @tailwind utilities; |
引入 app.css
在 app.js 中，引入 app.css，因为 app.js 做为 vite 的入口，所以app.js 中，可以引入app.css
|
1 2 |
import './bootstrap'; import '../css/app.css'; |
运行
|
1 |
npm run build |
解释
如下代码，来自于 chatgpt 的解释，因为我也是第一次用工程化的方法引入 js 和 css
这段代码用于安装和初始化 Tailwind CSS，一种功能强大且高度可定制的 CSS 框架。具体来说，它执行以下操作：
npm install -D tailwindcss postcss autoprefixer：使用 npm（Node.js 包管理器）安装三个依赖包：tailwindcss：Tailwind CSS 的核心库。postcss：一个用于转换 CSS 的开源工具，可以优化代码、引入新特性等。autoprefixer：一个 PostCSS 插件，会自动添加浏览器前缀以兼容不同浏览器。
-D标志表示这些包将作为开发依赖安装。npx tailwindcss init -p：使用 npx（npm 包执行器）运行tailwindcss init命令，以生成两个配置文件：tailwind.config.js：Tailwind CSS 的配置文件，您可以在此自定义样式、主题等。postcss.config.js：PostCSS 的配置文件，在其中配置插件（例如autoprefixer）。
-p标志表示同时生成 PostCSS 配置文件postcss.config.js。
postcss 作用是什么？
PostCSS 是一个可扩展的 CSS 处理工具，使用 JavaScript 插件来转换和优化 CSS 代码。它允许您在不改变原始 CSS 语法的情况下引入新特性、解决兼容性问题等。以下是一些常见的 PostCSS 插件及其应用示例：
- autoprefixer：自动添加浏览器前缀（vendor prefixes），以便在不同浏览器中实现跨浏览器兼容性。 示例：
输入：
|
1 2 3 |
.example { display: flex; } |
输出：
|
1 2 3 4 5 |
.example { display: -webkit-box; display: -ms-flexbox; display: flex; } |
- postcss-nested：支持嵌套选择器，使编写样式更简洁易懂。 示例：
输入：
|
1 2 3 4 5 6 7 |
.container { background-color: white; .button { color: red; } } |
输出：
|
1 2 3 4 5 6 7 |
.container { background-color: white; } .container .button { color: red; } |
- postcss-custom-properties：使您能够使用 CSS 自定义属性（即 CSS 变量）并为不支持它们的浏览器提供回退。 示例：
输入：
|
1 2 3 4 5 6 7 |
:root { --main-color: blue; } .text { color: var(--main-color); } |
输出：
|
1 2 3 4 5 6 7 |
:root { --main-color: blue; } .text { color: blue; } |
- cssnano：压缩和优化 CSS 代码，减小文件大小，加快页面加载速度。 示例：
输入：
|
1 2 3 4 |
.example { margin: 10px 20px; padding: 0px; } |
输出：
|
1 |
.example{margin:10px 20px;padding:0} |
这些插件只是 PostCSS 丰富生态系统中的一部分，还有许多其他插件可以满足不同需求和优化目标。
tailwindcss.config.js 解释
在 tailwindcss.config.js 文件中，您可以配置和自定义 Tailwind CSS。以下是对该文件内容的解释：
content：这个属性指定了 Tailwind 应该扫描哪些文件来查找类名（使用了 Tailwind 的样式），以便在构建时优化 CSS。在这个例子中，Tailwind 将会扫描以下文件：
- 所有位于
./resources/目录下的.blade.php文件。 - 所有位于
./resources/目录下的.js文件。
theme：这个属性允许您自定义 Tailwind 的主题设置。通过在theme.extend对象中添加自定义配置，您可以扩展或覆盖默认的样式。例如，您可以自定义字体、颜色、间距等。在这个例子中，extend对象为空，表示没有进行任何自定义。
示例：自定义字体
|
1 2 3 4 5 6 7 |
theme: { extend: { fontFamily: { 'custom': ['Custom Font', 'sans-serif'] }, }, } |
plugins：这个属性允许您注册额外的第三方插件。插件可以用来扩展 Tailwind 的功能，例如添加新的组件或实用程序。在这个例子中，plugins数组为空，表示没有启用任何插件。
示例：注册一个插件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const plugin = require('tailwindcss/plugin') module.exports = { // ... plugins: [ plugin(function({ addUtilities }) { const newUtilities = { '.truncate-2-lines': { 'overflow': 'hidden', 'text-overflow': 'ellipsis', 'display': '-webkit-box', '-webkit-line-clamp': '2', '-webkit-box-orient': 'vertical', }, } addUtilities(newUtilities) }), ], } |
总之，此 tailwindcss.config.js 文件定义了 Tailwind 在构建时应扫描哪些文件、提供了空的 theme.extend 对象用于自定义主题设置，并允许注册插件。通常，在项目进行时，开发者会根据需求在这个文件中进行更多的配置和自定义。
参考
Install Tailwind CSS 3 in Laravel 9 With Vite 3 (larainfo.com)
How to Install Tailwind CSS 3 in Laravel 9 With Vite 3 – TechvBlogs