laravel 支持 tailwindcss

作者

tailwindcss 是一个 CSS 框架，在 laravel 通过工程化的方式引入 tailwindcss，用到如下方法：

初始化 laravel 项目

laravel new tailwindcss-demo

安装依赖

npm install -D tailwindcss postcss autoprefixer

生成 tailwindcss 配置文件

 npx tailwindcss init -p

修改 tailwindcss 默认配置

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在 tailwindcss.config.js 中，主要是指定 blade 和 js 文件做为输入，因为可能会在 js 或者 blade 中用到 tailwindcss 的样式信息

修改 vite 配置

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

@tailwind base;
@tailwind components;
@tailwind utilities;

引入 app.css

在 app.js 中，引入 app.css，因为 app.js 做为 vite 的入口，所以app.js 中，可以引入app.css

import './bootstrap';
import '../css/app.css';

运行

npm run build

解释

如下代码，来自于 chatgpt 的解释，因为我也是第一次用工程化的方法引入 js 和 css

这段代码用于安装和初始化 Tailwind CSS，一种功能强大且高度可定制的 CSS 框架。具体来说，它执行以下操作：

  1. npm install -D tailwindcss postcss autoprefixer：使用 npm（Node.js 包管理器）安装三个依赖包：
    • tailwindcss：Tailwind CSS 的核心库。
    • postcss：一个用于转换 CSS 的开源工具，可以优化代码、引入新特性等。
    • autoprefixer：一个 PostCSS 插件，会自动添加浏览器前缀以兼容不同浏览器。
    -D 标志表示这些包将作为开发依赖安装。
  2. 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 插件及其应用示例：

  1. autoprefixer：自动添加浏览器前缀（vendor prefixes），以便在不同浏览器中实现跨浏览器兼容性。 示例：
    输入：
   .example {
     display: flex;
   }

输出：

   .example {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
   }
  1. postcss-nested：支持嵌套选择器，使编写样式更简洁易懂。 示例：
    输入：
   .container {
     background-color: white;

     .button {
       color: red;
     }
   }

输出：

   .container {
     background-color: white;
   }

   .container .button {
     color: red;
   }
  1. postcss-custom-properties：使您能够使用 CSS 自定义属性（即 CSS 变量）并为不支持它们的浏览器提供回退。 示例：
    输入：
   :root {
     --main-color: blue;
   }

   .text {
     color: var(--main-color);
   }

输出：

   :root {
     --main-color: blue;
   }

   .text {
     color: blue;
   }
  1. cssnano：压缩和优化 CSS 代码，减小文件大小，加快页面加载速度。 示例：
    输入：
   .example {
     margin: 10px 20px;
     padding: 0px;
   }

输出：

   .example{margin:10px 20px;padding:0}

这些插件只是 PostCSS 丰富生态系统中的一部分，还有许多其他插件可以满足不同需求和优化目标。

tailwindcss.config.js 解释

在 tailwindcss.config.js 文件中，您可以配置和自定义 Tailwind CSS。以下是对该文件内容的解释：

  1. content：这个属性指定了 Tailwind 应该扫描哪些文件来查找类名（使用了 Tailwind 的样式），以便在构建时优化 CSS。在这个例子中，Tailwind 将会扫描以下文件：
  • 所有位于 ./resources/ 目录下的 .blade.php 文件。
  • 所有位于 ./resources/ 目录下的 .js 文件。
  1. theme：这个属性允许您自定义 Tailwind 的主题设置。通过在 theme.extend 对象中添加自定义配置，您可以扩展或覆盖默认的样式。例如，您可以自定义字体、颜色、间距等。在这个例子中，extend 对象为空，表示没有进行任何自定义。

示例：自定义字体

theme: {
  extend: {
    fontFamily: {
      'custom': ['Custom Font', 'sans-serif']
    },
  },
}
  1. plugins：这个属性允许您注册额外的第三方插件。插件可以用来扩展 Tailwind 的功能，例如添加新的组件或实用程序。在这个例子中，plugins 数组为空，表示没有启用任何插件。

示例：注册一个插件

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

发表评论