laravel中使用scss和tailwindcss
# 安装 tailwindcss
npm install tailwindcss --save-dev
1
# 创建 tailwind 配置文件
npx tailwindcss init
1
// 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
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
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
2
3
4
5
6
7
# 构建运行
npm install
npm watch
1
2
2
上次更新: 2023/09/22, 16:54:32