有没有办法用 Angular (4+)配置TailwindCSS ？
我很高兴退出 Angular 项目，让 webpack 配置可用。但是我不确定要放入什么，webpack.config.js以便 TailwindCSS 可以很好地与 Angular 的内部配合使用。
最好有这样的设置，这样我仍然可以对 dev 使用单个命令（类似于npm start），并继续监视文件更改（包括 CSS）。构建项目也是如此。
问问题
2010 次
4 回答
4
方法1：（使用ng-eject）
您可以在Tom Gobich的这个精彩视频中找到完整的步骤，我将继续如下：
将 Sass 带入您的项目。如果从头开始运行：
$ ng new project --style=scss进入项目，安装tailwindcss然后生成配置文件：
$ cd project $ npm install tailwindcss --save-dev $ ./node_modules/.bin/tailwind init tailwind.config.js弹出您的应用程序以输出 webpack 配置文件并解决新的依赖项：
$ ng eject $ npm install将tailwindcss插件添加到webpack.config.js文件中：
const tailwindcss = require('tailwindcss'); // <-- create this constant ... const postcssPlugins = function () { ... return [ postcssUrl({ ... }), tailwindcss('./tailwind.config.js'), //<-- then add it here autoprefixer(), ... };将@tailwind 指令添加到src/styles.scss：
@tailwind preflight; // your custom components goes here. @tailwind utilities; // your custom utilities goes here.开始创建您的顺风组件或在线获取一些示例代码并将其放入src/app/app.component.html以进行快速测试，然后运行：
$ npm start
方法2：（没有ng-eject）
正如@hackafro ( Richard Umoffia ) 的这篇精彩文章中所提到的，您还可以使用 Tailwind 的 CLI来处理您的样式表。为此，在创建您的应用并生成 tailwind 的配置文件后：
$ ng new project
$ cd project
$ npm install tailwindcss --save-dev
$ ./node_modules/.bin/tailwind init tailwind.config.js
新建一个同级文件styles.css，调用tailwind-build.cssexample，添加如下内容：
@tailwind preflight;
// your custom components goes here.
@tailwind utilities;
// your custom utilities goes here.
然后，在您的package.jsonscript文件中，在属性下添加这两个脚本：
{
...
"scripts": {
...
"tailwind": "./node_modules/.bin/tailwind build ./src/tailwind-build.css -c ./tailwind.config.js -o ./src/styles.css",
"prestart": "npm run tailwind" // or "yarn run tailwind" depending on which you are using
}
},
现在每次启动服务器，或者每次手动输入终端时：
npm run tailwind // or "yarn run tailwind"
Tailwind 的 CLI 将用于./src/styles.css为您填充内容，这应该可以正常工作，因为 Angular CLI 已经在其上应用了 postCSS 插件，包括 autoprefixer，更多信息请点击此处：这是 angular-cli/webpack 向客户端提供 CSS 样式的方式
于 2017-11-26T23:33:46.387 回答
1
我使用 chokidar 整理了一些 JavaScript 来观察我的顺风文件，并在顺风文件发生更改时构建它们，因为 Angular（据我所知，截至 6.0.3）不允许访问 postcss 插件CLI 项目（以我的拙见，这完全是要走的路）。
chokidar.js（顶级文件，紧邻 package.json）：
const chokidar = require('chokidar')
const child = require('child_process')
const tailwind = chokidar.watch(['tailwind.js', './src/tailwind.css'])
tailwind.on('change', (event, path) => {
child.exec('npm run build-tailwind')
console.log('Reprocessing Tailwind Files')
})
package.json 脚本：
"scripts": {
"ng": "ng",
"build-tailwind": "./node_modules/.bin/tailwind build ./src/tailwind.css -c ./tailwind.js -o ./src/styles.css",
"prestart": "npm run build-tailwind",
"start": "ng serve & node chokidar.js",
"build": "npm run prestart && ng build"
}
正如您从 build-tailwind 脚本中看到的那样，我只是将 global 放入tailwind.css文件src/夹中styles.css，并且我所有的自定义 css 都像任何其他 tailwind 项目一样放在那里。
尾风.css：
@tailwind preflight;
/* custom components */
@tailwind utilities;
/* custom utilities */
我希望在我们等待 Angular 让我们直接访问 post-css 时对某人有所帮助。
更新：
我为 npm 构建了一个 cli 工具，以使其他任何试图利用 tailwind 在他们的 Angular 项目中提供的东西的人都非常容易。
于 2018-05-28T03:50:03.247 回答
1
有一种更好的方法，无需弹出 CLI，也无需为 tailwind 提供特定的 npm 脚本，只需连接到 CLI 的 webpack 加载器即可。
你需要安装npm install -D @angular-builders/custom-webpack postcss-scss tailwindcss
然后创建一个webpack.config.js配置文件：
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loader: 'postcss-loader',
options: {
ident: 'postcss',
syntax: 'postcss-scss',
plugins: () => [
require('postcss-import'),
require('tailwindcss')('./tailwind.config.js'),
]
}
}
]
}
};
然后更改您的angular.json文件以使用此新配置：
...
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "webpack.config.js"
},
...
}
},
...
将顺风实用程序导入您的styles.scss
@tailwind base;
@tailwind components;
@tailwind utilities;
现在只需运行npm start，您就可以在 HTML 中使用 tailwind 类或在 SCSS 文件中使用 @apply 了！
希望这可以帮助。
我创建了一个帖子来详细解释如何 - https://medium.com/@joao.a.edmundo/angular-cli-tailwindcss-purgecss-2853ef422c02
于 2019-12-27T11:37:12.970 回答
0
如果有人按照上面 Salem 的回答并出现“atRule.before 不是函数”错误，只需将所有 PostCSS 依赖项更新到最新版本，一切都应该再次正常工作。
于 2017-12-05T07:58:28.653 回答