laravel中使用scss和tailwindcss

# 安装 tailwindcss

npm install tailwindcss --save-dev

# 创建 tailwind 配置文件

npx tailwindcss init

// 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: [],
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# css 引入 tailwind

./resources/css/app.scss

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

1
2
3

# 配置 mix

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

1
2
3
4
5
6
7

# 构建运行

npm install
npm watch

1
2

#laravel

上次更新: 2023/09/22, 16:54:32

← laravel + dinggo + jwt搭建接口认证用户认证 Jetstream基本使用→