[英]How to use Tailwind CSS together with SCSS in Laravel/Vue project?
I'm trying to install tailwind css
from this guide into an existing laravel/vue
project, which uses scss
.我正在尝试将本指南中的 tailwind
tailwind css
安装到使用scss
的现有laravel/vue
项目中。
install packages安装包
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
create tailwind.config.js
创建
tailwind.config.js
npx tailwindcss init
add tailwind to webpack.mix.js
将顺风添加到
webpack.mix.js
const mix = require('laravel-mix'); const path = require('path'); mix.js('resources/js/app.js', 'public/js') .postCss("resources/css/app.css", "public/css", [require("tailwindcss")]) .alias({'@': 'resources/'}) .webpackConfig({resolve: {alias: {'@': path.resolve('resources/')}}}) .vue() .version() .browserSync('127.0.0.1:8000');
add tailwind to css
.向
css
添加顺风。 Where do I add it, if my scss filewatcher
is compiling the css
files of my project?如果我的
scss filewatcher
正在编译我的项目的css
文件,我应该在哪里添加它? I've tried to put:我试着说:
@tailwind base; @tailwind components; @tailwind utilities;
or或者
@import tailwindcss/base;
@import tailwindcss/components;
@import taildindcss/utilities;
into app.scss
but tailwind classes do not affect Vue components.进入
app.scss
但顺风类不会影响 Vue 组件。 I've also tried importing it into app.vue
which did not work either.我也尝试将其导入
app.vue
中,但也没有用。 The tailwind classes are correctly displayed in the editor dialogue and browser DOM but the css
props don't get rendered.顺风类正确显示在编辑器对话框和浏览器 DOM 中,但
css
道具未呈现。
Edit:编辑:
I've added this to tailwindcss.config.js
but the css
still does not get rendered in the browser:我已将此添加到
tailwindcss.config.js
,但css
仍然没有在浏览器中呈现:
module.exports = {
content: [
'./resources/views/*.blade.php',
'./resources/js/*.js',
'./resources/vue/**/*.vue',
'./resources/vue/*.vue',
],
theme: {
extend: {},
},
plugins: [],
}
In your resources/css/app.css, Add below code (Do not add to app.scss.)在您的资源/css/app.css 中,添加以下代码(不要添加到 app.scss。)
@tailwind base;
@tailwind components;
@tailwind utilities;
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.