Question

有没有办法用Angular（4+）配置tailwindcss（https://tailwindcss.com/）？

我很高兴推出Angular项目，以提供webpack配置。但是我不确定在webpack.config.js中放什么，以便tailwindcss与Angular的内部结构很好地协同工作。

如果有一个设置，我仍然可以使用dev的单个命令（类似'npm start'），并继续提交观看的更改（包括css），这将是很棒的。同样用于构建项目。

感谢。

Answer 1

方法1 :(使用ng-eject）

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

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

进入项目内，install tailwindcss然后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
```

方法2 :(不使用ng-eject）

如@hackafro（ Richard Umoffia ）在this nice article中所述，您也可以使用Tailwind的CLI to process your stylesheet。为此，在创建应用程序并生成顺风的配置文件之后：

$ 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内容，这应该可以正常工作，因为角度CLI已经在其上应用postCSS插件，包括autoprefixer，更多关于它：{{3 }}

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放在src/文件夹中，其中包含全局styles.css，并且我的所有自定义css都像其他任何内容一样放在那里顺风项目。

tailwind.css：

@tailwind preflight;

/* custom components */

@tailwind utilities;

/* custom utilities */

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

<强>更新

我为npm构建了一个cli工具，让其他任何人都可以轻松地利用tailwind在其角度项目中提供的功能。

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

Answer 3

有一种更好的方法，而不必退出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或SCSS文件中的@apply中使用顺风类了！

希望这会有所帮助。

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

Answer 4

如果有人按照上面的Salem回答并且＆＃34; atRule.before不是函数＆＃34; 错误，只需将所有PostCSS依赖项更新为最新版本和所有内容应该再次工作。

角4顺风设置

4 个答案: