Angular 4 TalwindCSS setup

Is there a way to configure TailwindCSS with Angular (4+)?

I'm happy to eject the Angular project, to make webpack configuration available. But I'm not sure what to put in the webpack.config.js so that TailwindCSS works nicely with the internals of Angular.

It would be great to have a setup such that I can still use a single command for dev (something like npm start), and continue to file changes watched (including CSS). Same for building the project.

Solution

Method 1: (using ng-eject)

You can find full steps in this great video by Tom Gobich which I'd resume as follow:

Bring Sass into your project. If starting from scratch just run:
```
$ ng new project --style=scss
```

Go inside project, 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 to output the webpack configuration file and solve new dependencies:
```
$ ng eject
$ npm install
```

add the tailwindcss plugin to webpack.config.js file:

const tailwindcss = require('tailwindcss'); // <-- create this constant
...

const postcssPlugins = function () {
   ...
   return [
      postcssUrl({
        ...
      }),
      tailwindcss('./tailwind.config.js'), //<-- then add it here
      autoprefixer(),
      ...
 };

add the @tailwind directives to src/styles.scss:

@tailwind preflight;

// your custom components goes here.

@tailwind utilities;

// your custom utilities goes here.

Start creating your tailwind components or grab some sample code online and put it into src/app/app.component.html for quick tests then run:
```
$ npm start
```

Method 2: (without ng-eject)

As mentioned in this nice article by @hackafro (Richard Umoffia) you can also use Tailwind's CLI to process your stylesheet. To do so, after creating your app and generating tailwind's config file:

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

Create a new file at the same level of styles.css, call it tailwind-build.css for example, and add the following content to it:

@tailwind preflight;

// your custom components goes here.

@tailwind utilities;

// your custom utilities goes here.

Then, inside your package.json file add those 2 scripts under the script attribute:

{
  ...
  "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
  }
},

Now every time you start your server, or every time you manually type in terminal:

npm run tailwind // or "yarn run tailwind"

Tailwind's CLI will be used to fill ./src/styles.css content for you, which should work fine as angular CLI is already applying postCSS plugins on top of it including autoprefixer, more about it here: This is how angular-cli/webpack delivers your CSS styles to the client