Angular 4 TalwindCSS 设置

Question

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

我很高兴退出 Angular 项目，以使 webpack 配置可用。但我不确定在 webpack.config.js 中添加什么内容，这样 TailwindCSS 才能与 Angular 的内部完美配合。

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

Answer 1

有一种更好的方法，无需弹出 CLI，也不需要特定的 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

Answer 2

我使用 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 脚本中看到的那样，我只是将 tailwind.css 与全局 styles.css 放在了 src/ 文件夹中，我所有的自定义 css 都像任何其他 tailwind 项目一样放在那里。

tailwind.css：

@tailwind preflight;

/* custom components */

@tailwind utilities;

/* custom utilities */

我希望在我们等待 Angular 让我们直接访问 post-css 时对某人有所帮助。

更新：

我为 npm 构建了一个 cli 工具，以使其他任何试图利用 tailwind 在其 Angular 项目中提供的功能的人都可以轻松完成此操作。

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

Answer 3

方法一：（使用ng-eject）

您可以在this great video by Tom Gobich 中找到完整的步骤，我将恢复如下：

1. Bring Sass into your project。如果从头开始运行：

   $ ng new project --style=scss
   

2. 进入项目，install tailwindcss 然后generate the config file：

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

3. Eject your app输出webpack配置文件并解决新依赖：

   $ ng eject
   $ npm install
   

4. 将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(),
         ...
    };
   

5. 将@tailwind directives 添加到src/styles.scss：

   @tailwind preflight;
   
   // your custom components goes here.
   
   @tailwind utilities;
   
   // your custom utilities goes here.
   

6. 开始创建您的顺风组件或获取 some sample code online 并将其放入 src/app/app.component.html 进行快速测试，然后运行：

   $ npm start
   

---

方法2：（不使用ng-eject）

正如@hackafro (Richard Umoffia) 在this nice article 中提到的，您还可以使用 Tailwind 的 CLI to process your stylesheet。为此，在创建您的应用并生成 tailwind 的配置文件后：

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

新建一个与styles.css同级的文件，例如命名为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 插件，包括 autoprefixer，更多信息请点击此处：This is how angular-cli/webpack delivers your CSS styles to the client

Answer 4

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