我正在一个新的 Angular 11 项目中尝试 Tailwindcss。我安装了以下开发包。
NOTE: Removed other packages for simplicity
"@angular-builders/custom-webpack": "^10.0.1",
"@angular-devkit/build-angular": "~0.1100.2",
"@angular/cli": "~11.0.2",
"@angular/compiler-cli": "~11.0.1",
"autoprefixer": "^10.0.2",
"postcss-import": "^13.0.0",
"postcss-loader": "^4.1.0",
"postcss-scss": "^3.0.4",
"tailwindcss": "^2.0.1",
Run Code Online (Sandbox Code Playgroud)
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loader: 'postcss-loader',
options: {
postcssOptions: {
ident: 'postcss',
syntax: 'postcss-scss',
plugins: () => [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer')
]
}
}
}
]
}
}
Run Code Online (Sandbox Code Playgroud)
样式.scss
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Run Code Online (Sandbox Code Playgroud)
角度.json
"builder": "@angular-builders/custom-webpack:browser", //dev-server
"customWebpackConfig": { "path": "webpack.config.js" } …Run Code Online (Sandbox Code Playgroud)