在 Laravel 上安装 Tailwind

Tailwind是一个流行的CSS框架，它能够提供丰富的样式和组件，让开发人员专注于业务逻辑，而不是样式。在Laravel项目中，我们可以使用npm包管理器来安装Tailwind。

步骤

以下是在Laravel项目中安装Tailwind的步骤：

1. 打开终端并进入您的Laravel项目。

cd /path/to/your/laravel/project

2. 运行以下命令安装npm。

npm init -y

3. 安装Tailwind CSS:

npm install tailwindcss

4. 接下来，您需要在项目根目录下创建一个名为tailwind.config.js的文件。

touch tailwind.config.js

5. 编辑文件并添加以下内容。

module.exports = {
  purge: [
     './resources/**/*.blade.php',
     './resources/**/*.js',
     './resources/**/*.vue',
    ],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

6. 编辑您的app.scss文件。

nano resources/sass/app.scss

7. 然后，将以下内容复制到文件顶部。

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

8. 最后，您需要将以下内容添加到webpack.mix.js文件。

mix.sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('./tailwind.config.js')],
    });

9. 运行以下命令进行编译。

npm run dev

结论

现在，您已经知道了如何在Laravel项目中安装Tailwind CSS。这个过程可能有点麻烦，但是一旦您熟悉了它，就可以快速轻松地设置。现在可以尝试使用Tailwind构建漂亮的用户界面了。