CODEWITHSUNDEEP
cssangularconfiguretailwind-css
TriDat Tran
TriDat Tran

Reputation: 43

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.

Upvotes: 3

Views: 2324

Answers (4)

Joao Edmundo
Joao Edmundo

Reputation: 439

There is a better way without having to eject the CLI and not having a specific npm script for tailwind but simply by hooking into your CLI's webpack loaders.

You need to install npm install -D @angular-builders/custom-webpack postcss-scss tailwindcss

Then create a webpack.config.js config file:

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          syntax: 'postcss-scss',
          plugins: () => [
            require('postcss-import'),
            require('tailwindcss')('./tailwind.config.js'),
          ]
        }
      }
    ]
  }
};

Then change your angular.json file to use this new configuration:

...
"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "webpack.config.js"
    },
    ...
  }
},
...

Import the tailwind utilities in your styles.scss

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

And now just run npm start and you are ready to use tailwind classes in your HTML or the @apply in your SCSS files!

Hope this helps.

I created a post to explain how in detail - https://medium.com/@joao.a.edmundo/angular-cli-tailwindcss-purgecss-2853ef422c02

Upvotes: 1

Ben Steward
Ben Steward

Reputation: 2417

I put together some JavaScript using chokidar to watch my tailwind files and build them out when changes occur in my tailwind files, since Angular (as of 6.0.3, to the best of my knowledge) does not allow access to the postcss plugins in a CLI project (which is totally the way to go, in my humble opinion).

chokidar.js (top-level file, right next to 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:

"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"
}

As you can see from the build-tailwind script, I just put tailwind.css in the src/ folder with the global styles.css, and all of my custom css goes there like any other tailwind project.

tailwind.css:

@tailwind preflight;

/* custom components */

@tailwind utilities;

/* custom utilities */

I hope that helps somebody while we wait for Angular to give us access to post-css directly.

UPDATE:

I built a cli tool for npm, to make this super easy on anyone else trying to take advantage of what tailwind offers in their angular projects.

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

Upvotes: 1

Salem Ouerdani
Salem Ouerdani

Reputation: 7916

Method 1: (using ng-eject)

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

  1. Bring Sass into your project. If starting from scratch just run: 

    $ ng new project --style=scss

  2. 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

  3. Eject your app to output the webpack configuration file and solve new dependencies:

    $ ng eject
$ npm install

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

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

    @tailwind preflight;

// your custom components goes here.

@tailwind utilities;

// your custom utilities goes here.

  6. 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

Upvotes: 4

Thanapong P.
Thanapong P.

Reputation: 13

If someone follow Salem's answer above and have the "atRule.before is not a function" error, just update all PostCSS dependencies to the latest version and everything should be working again.

Upvotes: 0

Related Questions