Angular 4 TalwindCSS 设置

Question

有没有办法将 TailwindCSS 配置为 Angular (4+)？

我很高兴退出 Angular 项目，使 webpack 配置可用。但我不确定要在 webpack.config.js 中放入什么，以便 TailwindCSS 可以很好地与 Angular.

的内部结构配合使用

最好有一个设置，这样我仍然可以对开发使用单个命令（类似于 npm start），并继续监视文件更改（包括 CSS）。构建项目也是如此。

Answer 1

方法一：（使用ng-eject）

您可以在 this great video by Tom Gobich 中找到完整的步骤，我将按如下方式继续：

Bring Sass into your project。如果从头开始运行：
```
$ ng new project --style=scss
```

进入项目，install tailwindcss then generate the config file:

$ cd project
$ npm install tailwindcss --save-dev 
$ ./node_modules/.bin/tailwind init tailwind.config.js

Eject your app输出webpack配置文件并解决新的依赖：
```
$ ng eject
$ npm install
```

将 tailwindcss plugin 添加到 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 directives添加到src/styles.scss:

@tailwind preflight;

// your custom components goes here.

@tailwind utilities;

// your custom utilities goes here.

开始创建顺风组件或获取 some sample code online 并将其放入 src/app/app.component.html 以进行快速测试然后运行:
```
$ npm start
```

方法二：（无 ng-eject）

如this nice article by @hackafro (Richard Umoffia) you can also use Tailwind's CLI to process your stylesheet所述。为此，在创建您的应用程序并生成 tailwind 的配置文件后：

$ ng new project
$ cd project
$ npm install tailwindcss --save-dev 
$ ./node_modules/.bin/tailwind init tailwind.config.js

新建一个与[=20=同级的文件]，例如命名为tailwind-build.css，并在其中添加以下内容：

@tailwind preflight;

// your custom components goes here.

@tailwind utilities;

// your custom utilities goes here.

然后，在您的 package.json 文件中，在 script 属性下添加这两个脚本：

{
  ...
  "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 插件，包括自动前缀，更多信息请点击此处：This is how angular-cli/webpack delivers your CSS styles to the client

Answer 2

如果有人按照上面 Salem 的回答进行操作并遇到 "atRule.before is not a function" 错误，只需将所有 PostCSS 依赖项更新到最新版本，一切都应该再次运行。

Answer 3

我使用 chokidar 整理了一些 JavaScript 来观察我的 tailwind 文件并在我的 tailwind 文件发生变化时构建它们，因为 Angular（从 6.0.3 开始，最好的我的知识）不允许访问 CLI 项目中的 postcss 插件（依我的拙见，这完全是可行的方法）。

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 脚本中看到的那样，我只是将 tailwind.css 放入具有全局 styles.css 的 src/ 文件夹中，以及我所有的自定义 css 像任何其他顺风项目一样去那里。

tailwind.css:

@tailwind preflight;

/* custom components */

@tailwind utilities;

/* custom utilities */

我希望在我们等待 Angular 允许我们直接访问 post-css 时帮助别人。

更新：

我为 npm 构建了一个 cli 工具，让其他任何试图在他们的 angular 项目中利用 tailwind 提供的东西的人都非常容易。

https://www.npmjs.com/package/ng-tailwindcss

Answer 4

有一种更好的方法，无需退出 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 实用程序

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

现在只需运行 npm start 就可以在 HTML 中使用 tailwind 类或在 SCSS 文件中使用 @apply！

希望对您有所帮助。

我创建了一个 post 来详细解释 - https://medium.com/@joao.a.edmundo/angular-cli-tailwindcss-purgecss-2853ef422c02

Angular 4 TalwindCSS 设置

Angular 4 TalwindCSS setup

css

angular

configure

tailwind-css