A CLI tool for integrating Tailwind CSS into Angular-CLI projects

By Ben Steward
Last update: Nov 21, 2022
Comments: 16

ng-tailwindcss

A CLI tool for integrating Tailwind CSS into Angular-CLI projects with as little pain as possible

Read this article to learn more about how and why this works. You can also use it with other frameworks like React and Next.js!

Core Features:

PurgeCSS v1.4.2, ready to rock "out of the box", but also fully configurable

Sass support with optional dependency on node-sass or dart-sass

Default configurations reflect Tailwind v1 file naming conventions (such as tailwind.config.js)

Angular Workspaces (and other monorepo structures) Support (ngtw v2.2.0+)

Watch related files using watchRelatedFiles property of ng-tailwind.js config. This array of paths/globs will be watched for changes and trigger rebuilding of tailwind files.

"Hot reloading" of all watched files, including ng-tailwind.js. Any file change or renaming or reconfiguring will automatically be picked up by ngtw, no need to kill or restart your dev server! 🚀

Why Is This Necessary?

If you haven't used Tailwind CSS yet, you really should! However, if you are trying to use Tailwind in an Angular project, you will quickly realize that the best features of tailwind are found in the build process, which is conveniently automated using (mostly) postCSS plugins. Unfortunately, Angular currently does not offer developers access to the webpack configuration being used 'under the hood', so you're out of luck. Unless...

You use ng eject! (not available in v6+)

If you are ok with losing all of the benefits of angular-cli (not advisable given the improvements continually being made to it), you can reference this excellent SO answer or YouTube video and learn how to get at the postCSS controls. Using this method, you will certainly enjoy faster development speed when dealing with styles. But when you reach for ng generate, ng add, or ng upgrade etc., you may find that you'll have some regrets, because running ng eject is PERMANENT. I hope you enjoy creating components 'by hand.'

However, if you're into having cake and eating it too, ng-tailwindcss is what you've been looking for! With a few straightforward CLI commands, you can retain the development advantage of angular-cli and enjoy all the benefits of the best CSS utility framework on the web. Oh, and did we mention PurgeCSS???

Let's get down to business:

Quick and Dirty Setup

(Recommended for new projects only, see Configuration section for safe handling of existing projects)

After starting your new angular-cli project run these commands:

npm i ng-tailwindcss -g
npm i tailwindcss -D
npx tailwind init # use --full, if you want to see all the defaults in your tailwind.config.js
ngtw configure
touch src/tailwind.css

Put all your tailwind imports in src/tailwind.css and run:

ngtw scripts

Run npm start and let the wind fill your wings!

Full Installation and Usage Guide

Install globally: npm i ng-tailwindcss -g
If you don't already have an angular project up and running, start your angular project (assumes angular cli is already installed globally): ng new angular-meets-tailwind
Follow Steps 1-3 from the Tailwind Installation Instructions:
- Install Tailwind (npm i tailwindcss -D)
- initialize (npx tailwind init)
- Use tailwind in your source css files.
A recommendation for new projects (no changes to global stylesheet yet) is to touch src/tailwind.css and use that file for all global styles and component classes. See Configuration section for existing projects.

Configure your tailwind source/destination/config files by running:

ngtw configure --config ./path/to/whatever-you-named-tailwind-config.js --source ./path/to/your-tailwind-source.css --output ./path/to/outputted-global-styles.css

This will result in an ng-tailwind.js file at your project's root:

module.exports = {
  // Tailwind Paths
  configJS: '/Absolute/path/to/whatever-you-named-tailwind-config.js',
  sourceCSS: '/Absolute/path/to/your-tailwind-source.css',
  outputCSS: '/Absolute/path/to/outputted-global-styles.css',
  watchRelatedFiles: [],
  // Sass
  sass: false,
  // PurgeCSS Settings
  ...
}

Please note that as of version 1.0.3, these paths will be absolute when created using the cli tool, though they can be manually edited to be relative paths with no adverse consequences.

For those curious, under the hood, these properties correspond to the paths used in the tailwind build command like so:

./node_modules/.bin/tailwind build {sourceCSS} -c {configJS} -o {outputCSS}
# npx is not assumed by this project, to avoid worrying about it as a dependency

See Configuration section for more details and implications for existing Angular projects

Add or adjust these scripts in your package.json:
```
scripts: {
  "prestart": "ngtw build",
  "start": "ng serve & ngtw watch",
  "build": "ngtw build && ng build"
}
```
or simply run ngtw scripts to have these adjustments made automatically in your package.json.

Now using npm start for your development server will ensure your tailwind files are being watched and built with your project, and you can still rely on the angular-cli for everything else (no ng eject! yay!).
When you're ready to filter out your unused CSS, reference the documentation below for the various ways you can implement and adjust PurgeCSS. (Quick Tip: To include PurgeCSS in your build script, simply adjust the ngtw build command like so: ngtw build --purge.)
Keep calm and angular on.

Configuration

The ng-tailwind.js file can be directly manipulated (in keeping with the tailwind way of doing things) after the initial configuration command has been run. Conversely, if you prefer the command line, running ngtw configure a second time will overwrite only the properties specified by the flags you include (e.g. ngtw configure -c ./new-tailwind-config.js will only change the configJS property, and retain the original values for sourceCSS and outputCSS).

Important: The default config (running ngtw configure with no arguments) will assume a configuration of:

{
  // Tailwind Paths
  configJS: './tailwind.config.js',
  sourceCSS: './src/tailwind.css',
  outputCSS: './src/styles.css',
  watchRelatedFiles: [],
  // Sass
  sass: false,
  // PurgeCSS Settings
  ...
}

Also important: these paths will actually be coerced to absolute paths. If you find this confusing, please open an issue, so the docs can be as clear as necessary.

It should be noted that such a configuration will set up your project to overwrite angular's default styles.css during each build, so if you desire to use the defaults in your existing project (recommended), you should remove any css from this file and place it in sourceCSS (the default being src/tailwind.css). If you are using styles.css as a source file (not really recommended), don't forget to edit your angular.json styles array to reflect your new global stylesheet (probably your outputCSS, but more complicated scenarios are certainly possible--be safe out there!).

Resetting to defaults

The --default flag can be included with the configure command at any time to overwrite all Tailwind Paths to the defaults (see below; PurgeCSS Settings will not change), with the exception of any other included flags when the command is run.

Example:

ng-tailwind.js (changed the file structure, needs an update)

module.exports = {
  // Tailwind Paths
  configJS: './some-tailwind-config.js',
  sourceCSS: './random/path/you/chose/tailwind.css',
  outputCSS: './way/different/location/of/styles.css'
  watchRelatedFiles: [],
  // Sass
  sass: false,
  // PurgeCSS Settings
  ...
}

bash script (this should fix it):

ngtw configure --default -o ./src/my-groovy-styles.css

ng-tailwind.js (updated)

module.exports = {
  // Tailwind Paths
  configJS: './tailwind.config.js', // default config value
  sourceCSS: './src/tailwind.css', // default source value
  outputCSS: './src/my-groovy-styles.css' // -o (--output) overrides default
  watchRelatedFiles: [],
  // Sass
  sass: false,
  // PurgeCSS Settings
  ...
}

PurgeCSS Implementation Guide

How it Works

It is important to note that PurgeCSS will manipulate the output CSS file itself, directly.

For example:

ngtw build produces =>
styles.css file of ~300kb (all possible selectors; results may vary) =>
ngtw purge takes in that stylesheet and =>
rewrites styles.css file of 6kb (same file location, but with only a fraction of the original selectors, and no comments)

"Ah, but how does PurgeCSS know what selectors I'm using?" you ask.

ng-tailwindcss uses a custom extractor that is run against all .html and .ts files in the /src directory. You can edit your PurgeCSS configuration in the ng-tailwind.js file. Read the PurgeCSS Docs to see what is possible and how to maximize the configuration for your project.

How To Use It

When including PurgeCSS in your Angular/Tailwind magnum opus, there are 3 ways to execute the script:

Lock It in at the Configuration Level

This strategy ensures that PurgeCSS will clean up your Tailwind-generated global stylesheet every time Tailwind builds.

Usage: ngtw configure --purge

This configure flag sets {purge: true} in your ng-tailwind.js file. This property defaults to false, but, when true, it will not be overridden by any other CLI commands that initiate a build. **It is important to note that any PurgeCSS configuration options set to true in the ng-tailwind.js file will not be overridden by a CLI command.

However, you can set {purge: false} at any time by manually editing the file (of course), or running ngtw c --unset-purge.

Example: PurgeCSS All The Things
```
ngtw configure --default --purge
ngtw scripts

# Even though the scripts command does not create any PurgeCSS scripts,
# the configuration of {purge: true} in ng- will cause PurgeCSS
# to run after every successful Tailwind build.
```
Run It with the ngtw Build Command

This is a slightly more manual approach, where you are telling PurgeCSS to run with a flag on the build command.

Usage: ngtw build --purge.

Obviously, this tells tailwind to rebuild your stylesheet, then PurgeCSS is immediately excecuted on the resulting output file (outputCSS in ng-tailwind.js) using the settings specified in ng-tailwind.js.

Example: Production Build Script
```
"scripts": {
  "b-dev": "ngtw build && ng build", // dont purge
  "b-prod": "ngtw build --purge && ng build -c production" // purge
}
```

Run the Command Directly

This gives you granular control over when PurgeCSS runs, as well as a few other options that can be altered with each execution.

Usage: ngtw purge [--keyframes] [--fontface] [--rejected]

At any time this command can be run to purge your outputCSS file. By default, the settings specified in your ng-tailwind.js file will be used, but any boolean properties (keyframes, fontface, rejected) that are false can be overridden to be true during this run with the use of the flags.

Example: Debugging Dynamically Generated Selectors

ngtw build && ngtw purge --rejected

{project root}/rejectedCSS.json:

[
  ".dynamically-generated-class", // Ah! Forgot to whitelist this one!
  ".useless-class",
  "#useless-id",
  "etc..."
]

ng-tailwind.js:

module.exports = {
  // Tailwind Paths
  configJS: './tailwind.config.js',
  sourceCSS: './src/tailwind.css',
  outputCSS: './src/styles.css',
  watchRelatedFiles: [],
  // Sass
  sass: false,
  // PurgeCSS Settings
  purge: false,
  keyframes: false,
  fontFace: false,
  rejected: false,
  whitelist: ['dynamically-generated-class'], // Problem solved
  whitelistPatterns: [/dynamically/, /generated/, /class/], // overkill, but also works
  whitelistPatternsChildren: [],
  extensions: ['.ts', '.html', '.js'],
  content: []
}

Monorepo Support

If you are working with a monorepo structure where the content you need PurgeCSS to examine is not necessarily in the ./src/ directory, you can use the content property to define the path to those directories.

Example:

content: ['./app1/**/*.html', './app1/**/*.ts', '../app2/**/*.js']

The default extractor and default content glob/path (to the ./src/ directory) cannot be changed

If you have sub-projects that require fine-tuning of your ng-tailwind.js options, then you can create alternate ng-tailwind.js files for those sub-projects and leverage them in your watch/build/purge commands with the option --config (-c). For example, your package.json scripts might look like this:

{
  "start": "ng serve & ngtw watch", // serves up "main app" using the default ./ng-tailwind.js for configuration
  "start:other": "ng serve other & ngtw watch -c projects/other-app/other-ng-tailwind.js", // serves up sub-project in same monorepo with custom config file
  "build": "ngtw build && ng build",
  "build:other": "ngtw build other -c projects/other-app/other-ng-tailwind.js && ng build"
}

Using Sass

To take advantage of Sass in your tailwind.(s)css file, either node-sass or sass (dart-sass on Angular 8) must be installed in your project (most likely included with your Angular app unless you removed it somehow, because you have way too much time on your hands). In the rare scenario it is not installed, run npm i -O node-sass (or sass) in your project root (installs as optional dependency) and you're good to go.

Once this optional dependency is in place, configure for Sass with ngtw c --sass.

If for some reason your dependency tree contains node-sass and dart-sass and you prefer that dart-sass be used to compile your sass, you can edit the ng-tailwind.js file like so:

module.exports = {
  // Tailwind Paths
  ...
  // Sass
  sass: 'sass', // possible values: true, false, 'node-sass', 'dart-sass', and 'sass'. ('sass' == 'dart-sass')
  // PurgeCSS Settings
  ...
}

That's all! Keep in mind, this tool does not compile CSS/SCSS from any other files, so you'll still have to configure your angular.json for the rest, which is the preferred way to handle those files.

A note on how this is implemented: The compiled CSS from your tailwind.scss is stored in a temporary .css file that is immediately destroyed once the build is complete. At the moment, there is no way to alter this behavior. If this is not optimal for your situation, please file an issue.

Upgrading from older versions of ng-tailwindcss

The only breaking change ever introduced would be the name change of the default tailwind config file (tailwind.js => tailwind.config.js), otherwise all commands will continue to work as expected. However, newer versions do contain more features in the configuration file, which you may or may not be aware of or even want to make use of.

To take full advantage of the latest PurgeCSS or Sass capabilities, simply install the latest version globally with npm i -g [email protected], then run ngtw c and your ng-tailwind.js file will automatically fill out with the default PurgeCSS settings properties (of course, you could manually add them too, if you're into that sort of thing). Even without updating ng-tailwind.js, running any variety of the purge command will still work (default PurgeCSS Settings will be used).

A Few Notes About Existing Angular Projects

For existing projects that already have global stylesheets and other established CSS patterns, here are a few things to keep in mind:

On each build, Tailwind will overwrite the outputCSS file, so be sure to only edit the sourceCSS file with your custom styles.
Don't forget to adjust your angular.json styles array to reflect the outputCSS file, if you are using your original global stylesheet as your sourceCSS file.
If you already have complicated start/build/production/etc scripts, then manually customizing these scripts should be preferred over running ngtw s.
- ngtw build should be included before any build process using && to ensure all stylesheets are up-to-date before the angular build takes place.
  
  ex: "build-prod": "ngtw build && ng build --prod --aot"
- ngtw watch should be coupled with the dev server command (ng serve) using a single & so the processes run concurrently and can be killed concurrently.
  
  ex: "start": "ng serve & ngtw watch"
- ngtw build should also be included in a prestart script to ensure that styles are up-to-date before launching the dev server. If your dev server starts with a different command (with no pre option), consider:
  
  ex: "custom dev command": "ngtw build && fancy -dev -server -command & ngtw watch

Running into a scenario not covered in this documentation? Open an issue!

Command Aliases

You can alias your commands or argument flags thus:

ng-tailwindcss => ngtw

    configure => c
        --config => -c
        --source => -s
        --output => -o
        --default => -d
        --purge => -p
        --unset-purge (no alias)
        --sass (no alias, and must be manually set to false)

    build => b
        --purge => -p
        --config => -c
    
    purge => p
        --keyframes => -k
        --fontface => -f
        --rejected => -r
        --config => -c

    watch => w
        --config => -c
    scripts => s

    --help => -h

including --help will provide a description of any command or argument.

Contributing

If you enjoy helping other developers get stuff done more efficiently, then we share a common goal, my friend. I would love to hear your ideas to make this project better, or to review your pull requests.

Github

https://github.com/tehpsalmist/ng-tailwindcss

Comments(16)

1

NGTW build on save via Angular CLI?

Hi

I'm having pretty much easy question, but one of the most important for me right now. I'm making an app with the latest TailwindCSS and ng-tailwind version. Is there any way to call ngtw build on save (similarly like the Angular's CLI compiles). I am asking because now everytime i want to extract component, i need to call ngtw build command and in long term run it's a bit annoying. Can i fix that? I've heard that with ng eject we can access webpack and then do that there, but unfortunately there is no ng eject now (it's disabled).

Every feedback will be helpful and apprecieated!
2

Tailwind css output not being updated
I've started to have issues whereby any changes to tailwind.js is simply not being reflected elsewhere. This was working fine up until this morning.

I'm now getting:
```
{ Error: Command failed: /Volumes/Work/MH/AngularTailwind/node_modules/.bin/tailwind build /Volumes/Work/MH/AngularTailwind/src/styles/tailwind/tailwind-source.css -c /Volumes/Work/MH/AngularTailwind/tailwind.js -o /Volumes/Work/MH/AngularTailwind/src/styles/tailwind/tailwind-output.css
/bin/sh: /Volumes/Work/MH: No such file or directory
```
I had a base project where everything was working. I copied and pasted that to have a foundation to work from. Now both are completely messed up. I've installed tailwind and ng-tailwindcss with absolutely no luck.

The only thing I can think of now is to create an entirely new project from scratch.
3

ngtw watch issues and other minor improvements
Having some problems after following the installation instructions on a brand new Angular 8 application and a fresh install of ng-tailwindcss.

Starting with the minor stuff:
1. The ng-tailwind.js file generated paths with '', which caused issues when I changed the path to 'src\sass\tailwind.scss' because '\s' was treated like an escaped character. Had to manually switch them to '/'.
2. Sass documentation example shows to leave the files as .css in the config paths, but should probably be .scss instead. (Angular app is likely setup as scss if we're using it in tailwind)
3. ngtw watch provides no output to the console saying the watch has started. Something like "Watching '@file' for changes..." would probably go a long way to avoid any confusion.
4. ngtw -version would be nice so when we submit issues we can know what version we're on.
And now the larger issue:
1. ngtw watch seems to only work once. A simple example:
```
@tailwind base;

@tailwind components;

@tailwind utilities;

.btn {
    @apply bg-blue-500 text-black font-bold py-2 px-4 rounded;
}
```
If I change 'text-black' to 'text-white', it compiles and works. If I undo and save the file, nothing happens. Making any changes to the file a second time doesn't trigger the watch.
4

Add "watch" option

Use case:

module.exports = { configJS: 'tailwind.config.js', sourceCSS: 'src/assets/styles/tailwind.scss', outputCSS: 'src/tailwind-output.css', watch: ['src/**/*.scss'], .... }
5

npm run start not watching tailwind files

The following repo shows the set up: https://github.com/samwilliscreative/ngtailwind-watch-issue

Running npm run start serves the angular app, but the watcher for tailwind doesn't appear to run. Making changes to my tailwind.scss file doesn't trigger a tailwind rebuild either.

Running ngtw watch works on its own though.

Would really like to get this working as part of the regular serve script.
6

Config option to specify path to ".html" files for purging css

First thing first, thank you for ng-tailwind. You did a great work with this package. I really appreciate your hard work and making Tailwind easily available for the people working in Angular.

I was wandering if you could add an extra config option (if this is already possible, please let me know) for people having their component templates in other folders than the default path which Angular generates (src at root level with the angular.json file).

In my case, our whole Angular application is under a frontend folder in a monorepo for the whole application.

So yeah, in order to achieve the purging effects, I had to point the purge.js script to the specific folder.

Not sure how common my use-case is, but it wouldn't hurt to be able to point to a specific folder for the purge functionality to scan for css classes used in templates.

Tailwind 2.0 Compatibility

Hi Team,

I've just installed Tailwind 2.0 > npm prestart =

> ngtw build

{ Error: Command failed: node_modules/.bin/tailwind build "./src/styles/tailwind/config.css" -c "./tailwind.config.js" -o "./src/styles/tailwind/output.css"
   🚫 Error: [object Object] is not a PostCSS plugin
    at Processor.normalize (/mypath/myproject/node_modules/postcss/lib/processor.js:168:15)
    at new Processor (/mypath/myproject/node_modules/postcss/lib/processor.js:52:25)
    at postcss (/mypath/myproject/node_modules/postcss/lib/postcss.js:55:10)
    at _lodash.default.flatMap.style (/mypath/myproject/node_modules/tailwindcss/lib/util/parseObjectStyles.js:24:33)
    at arrayMap (/mypath/myproject/node_modules/lodash/lodash.js:639:23)
    at map (/mypath/myproject/node_modules/lodash/lodash.js:9580:14)
    at Function.flatMap (/mypath/myproject/node_modules/lodash/lodash.js:9283:26)
    at parseObjectStyles (/mypath/myproject/node_modules/tailwindcss/lib/util/parseObjectStyles.js:23:26)
    at parseObjectStyles (/mypath/myproject/node_modules/tailwindcss/lib/util/parseObjectStyles.js:20:12)
    at _lodash.default.flatMap.style (/mypath/myproject/node_modules/tailwindcss/lib/util/processPlugins.js:37:123)

    at ChildProcess.exithandler (child_process.js:294:12)
    at ChildProcess.emit (events.js:198:13)
    at maybeClose (internal/child_process.js:982:16)
    at Socket.stream.socket.on (internal/child_process.js:389:11)
    at Socket.emit (events.js:198:13)
    at Pipe._handle.close (net.js:606:12)
  killed: false,
  code: 1,
  signal: null,
  cmd:

After following the guides here: https://tailwindcss.com/docs/upgrading-to-v2#upgrade-to-node-js-12-13-or-higher and here: https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

npm install [email protected] [email protected] [email protected]

npm install [email protected]:@tailwindcss/postcss7-compat [email protected]^7 [email protected]^9

I now get the following error when running the ng-tailwindcss command "prestart": "ngtw build",

{ Error: Command failed: node_modules/.bin/tailwind build "./src/styles/tailwind/config.css" -c "./tailwind.config.js" -o "./src/styles/tailwind/output.css"
/bin/sh: node_modules/.bin/tailwind: No such file or directory

    at ChildProcess.exithandler (child_process.js:294:12)
    at ChildProcess.emit (events.js:198:13)
    at maybeClose (internal/child_process.js:982:16)
    at Socket.stream.socket.on (internal/child_process.js:389:11)
    at Socket.emit (events.js:198:13)
    at Pipe._handle.close (net.js:606:12)
  killed: false,
  code: 127,
  signal: null,
  cmd:
   'node_modules/.bin/tailwind build "./src/styles/tailwind/config.css" -c "./tailwind.config.js" -o "./src/styles/tailwind/output.css"' }

8

feat(build): adding the config option for builds
This PR is intent to add the config flag into the build command.

Improvements:
- Now you can have multiple configurations for tailwind and be able to build it. So useful for monorepos when each app has their own configuration.
9

Auto-rebuild

npm start builds Tailwind and then runs ng serve. Great!

However... Tailwind is not rebuilt and purgecss is not re-run when a file is updated.

The live dev server reloads the page.

There are missing styles.

I have to restart the server with ^C-up-enter...

Is there any better solution, for example auto rebuild?
10

How can we get purgeCSS working with ng-tailwindcss

The default bundle of tailwind is 300kb... in my experience a tailwind max will be 40kbs after purgeCSS... do you know how we can get this working in angular?
11

Importing custom css files to sourceCSS.
I am trying to import custom css files into sourceCSS. These custom css files contain tailwind syntax like @apply. While building the imports are just converted to the same imports in the outputCSS file. My sourceCSS file looks like this
```
@import "tailwindcss/base";
@import "tailwindcss/components";

// Custom CSS Files
@import "./custom-css/auth.css";

@import "tailwindcss/utilities";
```
My custom css file auth.css looks like this
```
.auth-card{
  @apply border-2 shadow-lg p-3;
}
```
In my output file I got this
```
...
...
@import "./custom-css/auth.css";
..
..
```
The contents of auth.css is not getting processed by Tailwind.

Whereas if I directly add the content of auth.css to sourceCSS file then its getting built fine. This ofcourse is not what I want since I will be left with a very long sourceCSS file in the long run.
```
@import "tailwindcss/base";
@import "tailwindcss/components";

// This works
.auth-card{
  @apply border-2 shadow-lg p-3;
}

@import "tailwindcss/utilities";
```
12

chore(deps): bump commander from 7.2.0 to 9.4.1
Bumps commander from 7.2.0 to 9.4.1.
Release notes

Sourced from commander's releases.
v9.4.1

Fixed
- .setOptionValue() now also clears option source (#1795)
- TypeScript: add implied to OptionValueSource for option values set by using .implies() (#1794)
- TypeScript : add undefined to return type of .getOptionValueSource() (#1794)
Changed
- additions to README
v9.4.0

Added
- preSubcommand hook called before direct subcommands (#1763)
Fixed
- export InvalidOptionArgumentError in esm (#1756)
Changed
- update dependencies (#1767)
v9.3.0

Added
- .summary() for a short summary to use instead of description when listing subcommands in help (#1726)
- Option.implies() to set other option values when the option is specified (#1724)
- updated Chinese README with 9.x changes (#1727)
Fixed
- TypeScript: add string[] to .options() default value parameter type for use with variadic options (#1721)
Deprecated
- multi-character short option flag (e.g. -ws) (#1718)
v9.2.0

Added
- conditional export of 'types' for upcoming TypeScript module resolution (#1703)
- example file showing two ways to add global options to subcommands (#1708)
Fixed
- detect option conflicts in parent commands of called subcommand (#1710)
Changed
... (truncated)
Changelog

Sourced from commander's changelog.
[9.4.1] (2022-09-30)

Fixed
- .setOptionValue() now also clears option source (#1795)
- TypeScript: add implied to OptionValueSource for option values set by using .implies() (#1794)
- TypeScript : add undefined to return type of .getOptionValueSource() (#1794)
Changed
- additions to README
[9.4.0] (2022-07-15)

Added
- preSubcommand hook called before direct subcommands (#1763)
Fixed
- export InvalidOptionArgumentError in esm (#1756)
Changed
- update dependencies (#1767)
[9.3.0] (2022-05-28)

Added
- .summary() for a short summary to use instead of description when listing subcommands in help (#1726)
- Option.implies() to set other option values when the option is specified (#1724)
- updated Chinese README with 9.x changes (#1727)
Fixed
- TypeScript: add string[] to .options() default value parameter type for use with variadic options (#1721)
Deprecated
- multi-character short option flag (e.g. -ws) (#1718)
[9.2.0] (2022-04-15)

Added
- conditional export of 'types' for upcoming TypeScript module resolution (#1703)
- example file showing two ways to add global options to subcommands (#1708)
Fixed
... (truncated)
Commits
- 0b4198d 9.4.1
- c15ae68 Update CHANGELOG for 9.4.1
- 471ec40 Add copyInheritedSettings to README (#1798)
- 8236966 Add mention of makeOptionMandatory in README (#1797)
- 72be61c Add implied to option value sources (#1794)
- 84d9201 setOptionValue should clear option source (#1795)
- 82fcb98 Update CHANGELOG preparing for 9.4.0
- 177cc6e Update dependencies (#1767)
- 2c7f687 feat: add preSubcommand hook (#1763)
- 3ae30a2 Export InvalidOptionArgumentError in esm (#1756)
- Additional commits viewable in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
13

chore(deps): bump purgecss from 1.4.2 to 5.0.0
Bumps purgecss from 1.4.2 to 5.0.0.
Release notes

Sourced from purgecss's releases.
v5.0.0

Bug Fixes
- add safelist variables to postcss-purgecss #840 (c822058)
- gulp-purgecss: support skippedContentGlobs option #853 (b72de77)
- Purgecss webpack plugin/only filter fix (#933) (f8e4c2c)
- purgecss-webpack-plugin: add sourcemap support #409 (b3f73ed)
- purgecss-webpack-plugin: export as named export as well as default (#821) (a6a2c8e)
- wrong path import (4f3ddd0)
Features
- add source map support #526 (f2a9c5a)
- gulp-purgecss: add support for gulp-sourcemaps #257 (55c26d2)
- postcss-purgecss: load options from purgecss config (4de3bd8)
- purgecss-webpack-plugin: load config file automatically #767 (726faaa)
BREAKING CHANGES
- purgecss-webpack-plugin: drop webpack 4 support
What's Changed (generated commit list minus dependabot)
- build(deps): update dependencies
- build(deps-dev): update dev dependencies
- fix(purgecss-webpack-plugin): export as named export as well as default by @G-Rath in FullHuman/purgecss#821
- Guide for Hugo by @zwbetz-gh in FullHuman/purgecss#918
- add github-actions to dependabot by @coliff in FullHuman/purgecss#934
- Purgecss webpack plugin/only filter fix by @mefu in FullHuman/purgecss#933
New Contributors
- @G-Rath made their first contribution in FullHuman/purgecss#821
- @zwbetz-gh made their first contribution in FullHuman/purgecss#918
- @mefu made their first contribution in FullHuman/purgecss#933
Full Changelog: https://github.com/FullHuman/purgecss/compare/v4.1.3...v5.0.0

v4.1.0

Bug Fixes
- Allow Absolute Paths (#679) (15335a2)
- css variable removed when declared in wrong order (89ece42), closes #518
- Fix interaction with other plugins (#647) (fb08e3a)
- grunt-purgecss: Fix plugin not ouputting all files (#723) (646e419)
- gulp-purgecss: fix support for stream input (fd5d3bf)
- Keep keyframe decimals for prefixed @keyframes (#749) (b804441)
- purgecss-from-pug: class attribute with multiple values not correctly handled with pug (#678) (ba6285d), closes #677
Features
... (truncated)
Changelog

Sourced from purgecss's changelog.
5.0.0 (2022-09-13)

Bug Fixes
- add safelist variables to postcss-purgecss #840 (c822058)
- gulp-purgecss: support skippedContentGlobs option #853 (b72de77)
- Purgecss webpack plugin/only filter fix (#933) (f8e4c2c)
- purgecss-webpack-plugin: add sourcemap support #409 (b3f73ed)
- purgecss-webpack-plugin: export as named export as well as default (#821) (a6a2c8e)
- wrong path import (4f3ddd0)
Features
- add source map support #526 (f2a9c5a)
- gulp-purgecss: add support for gulp-sourcemaps #257 (55c26d2)
- postcss-purgecss: load options from purgecss config (4de3bd8)
- purgecss-webpack-plugin: load config file automatically #767 (726faaa)
BREAKING CHANGES
- purgecss-webpack-plugin: drop webpack 4 support
(2022-09-13)

4.1.0 (2021-11-28)

Bug Fixes
- Allow Absolute Paths (#679) (15335a2)
- css variable removed when declared in wrong order (89ece42), closes #518
- Fix interaction with other plugins (#647) (fb08e3a)
- grunt-purgecss: Fix plugin not ouputting all files (#723) (646e419)
- gulp-purgecss: fix support for stream input (fd5d3bf)
- Keep keyframe decimals for prefixed @keyframes (#749) (b804441)
- purgecss-from-pug: class attribute with multiple values not correctly handled with pug (#678) (ba6285d), closes #677
Features
- add dynamicAttributes option (2f9cc65)
- add option to ouput unused css (#763) (3a3d958)
- add purgecss-from-tsx (#716) (e556afc)
- export all types #780 (1a959c6)
- new purgecss-from-jsx plugin (#692) (3570c7d)
(2021-06-07)

Bug Fixes
- Allow Absolute Paths (#679) (15335a2)
- purgecss-from-pug: class attribute with multiple values not correctly handled with pug (#678) (ba6285d), closes #677
... (truncated)
Commits
- 3b98734 build:5.0.0
- 2c3768e build(deps-dev): bump @vuepress/plugin-search (#985)
- 433fdac build(deps-dev): bump @typescript-eslint/parser from 5.32.0 to 5.36.2 (#993)
- a4acb8b build(deps-dev): bump rollup from 2.77.2 to 2.79.0 (#981)
- c22624a build(deps-dev): bump @typescript-eslint/eslint-plugin (#986)
- 8445aa1 build(deps-dev): bump lerna from 5.1.6 to 5.5.0 (#982)
- 58eef23 build(deps-dev): bump @vuepress/plugin-search (#968)
- e7579d1 build(deps-dev): bump vuepress from 2.0.0-beta.48 to 2.0.0-beta.49 (#975)
- b624550 build(deps): bump actions/setup-node from 1 to 3 (#937)
- 6a76d7a build(deps-dev): bump @types/node from 18.6.3 to 18.6.4 (#974)
- Additional commits viewable in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
14

chore(deps): bump update-notifier from 5.1.0 to 6.0.2
Bumps update-notifier from 5.1.0 to 6.0.2.
Release notes

Sourced from update-notifier's releases.
v6.0.2
- Fix license d152f85
https://github.com/yeoman/update-notifier/compare/v6.0.1...v6.0.2

v6.0.1
- Update dependencies (#222) 3f7c9f3
https://github.com/yeoman/update-notifier/compare/v6.0.0...v6.0.1

v6.0.0

Breaking
- Require Node.js 14 9183541
- This package is now pure ESM. Please read this.
https://github.com/yeoman/update-notifier/compare/v5.1.0...v6.0.0
Commits
- 3b6b9b1 6.0.2
- d152f85 Fix license
- 020613b 6.0.1
- 3f7c9f3 Update dependencies (#222)
- 311557e 6.0.0
- 9183541 Require Node.js 14 and move to ESM
- See full diff in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
15

chore(deps-dev): bump standard from 15.0.1 to 17.0.0
Bumps standard from 15.0.1 to 17.0.0.
Release notes

Sourced from standard's releases.
v17.0.0

We're super excited to announce standard 17!

This major release fully focuses on getting in sync with the wider ESLint ecosystem and doesn't in itself introduce any new rules or features.

When you upgrade, consider running standard --fix to automatically format your code to match the current set of rules.

This is the first release by two of our standard co-maintainers @Divlo and @voxpelli. Buy them a cake if you run into them, thanks for getting this release out!

Major changes
- eslint-config-node has been replaced with the up to date fork eslint-config-n. If you have used comments like // eslint-disable-line node/no-deprecated-api you now have to reference the n/ rules instead.
- object-shorthand rule (as warning)
- Use of ESLint 8, which allows for support for all of the latest syntax that ESLint 8 includes, such as top level await #1548 #1775
- --verbose by default
Changed features
- Update eslint from ~7.18.0 to ^8.13.0
- Update eslint-config-standard from 16.0.3 to 17.0.0 to adapt to ESLint 8
- Update eslint-config-standard-jsx from 10.0.0 to ^11.0.0 to adapt to ESLint 8
- Update standard-engine from ^14 to ^15.0.0 to adapt to ESLint 8, see its CHANGELOG
- Move from [email protected]~11.1.0 to [email protected]^15.1.0 to adapt to ESLint 8
- Update eslint-plugin-import from ~2.24.2 to ^2.26.0
- Update eslint-plugin-promise from ~5.1.0 to ^6.0.0
- Update eslint-plugin-react from ~7.25.1 to ^7.28.0
https://github.com/standard/standard/compare/v16.0.4...v17.0.0

v17.0.0-2
- fix: update eslint-config-standard-jsx to fix #1548 (#1775) c120a60
https://github.com/standard/standard/compare/v17.0.0-1...v17.0.0-2

v17.0.0-1
- Fix: Ensure we support all of the latest syntax that ESLint 8 includes, such as top level await #1548, fixed in standard/eslint-config-standard#212
https://github.com/standard/standard/compare/v17.0.0-0...v17.0.0-1

v17.0.0-0

We're finally able to offer a pre-release of ESLint 8 based standard 17!

This major release fully focuses on getting in sync with the wider ESLint ecosystem and doesn't in itself introduce any new rules or features.

This pre-release exists to test out the ESLint 8 related changes and discover possible backwards incompatible changes that comes with it and mitigate unintended such before a stable release.

When you upgrade, consider running standard --fix to automatically format your code to match the current set of rules.
... (truncated)
Changelog

Sourced from standard's changelog.
[17.0.0] - 2022-04-20

We're super excited to announce standard 17!

This major release fully focuses on getting in sync with the wider ESLint ecosystem and doesn't in itself introduce any new rules or features.

When you upgrade, consider running standard --fix to automatically format your code to match the current set of rules.

This is the first release by two of our standard co-maintainers @Divlo and @voxpelli. Buy them a cake if you run into them, thanks for getting this release out!

Major changes
- eslint-config-node has been replaced with the up to date fork eslint-config-n. If you have used comments like // eslint-disable-line node/no-deprecated-api you now have to reference the n/ rules instead.
- object-shorthand rule (as warning)
- Use of ESLint 8, which allows for support for all of the latest syntax that ESLint 8 includes, such as top level await #1548 #1775
- --verbose by default
Changed features
- Update eslint from ~7.18.0 to ^8.13.0
- Update eslint-config-standard from 16.0.3 to 17.0.0 to adapt to ESLint 8
- Update eslint-config-standard-jsx from 10.0.0 to ^11.0.0 to adapt to ESLint 8
- Update standard-engine from ^14 to ^15.0.0 to adapt to ESLint 8, see its CHANGELOG
- Move from [email protected]~11.1.0 to [email protected]^15.1.0 to adapt to ESLint 8
- Update eslint-plugin-import from ~2.24.2 to ^2.26.0
- Update eslint-plugin-promise from ~5.1.0 to ^6.0.0
- Update eslint-plugin-react from ~7.25.1 to ^7.28.0
[17.0.0-2] - 2022-02-03
- Fix: Follow up to the fix of #1548 in 17.0.0-1 #1775
[17.0.0-1] - 2022-01-31
- Fix: Ensure we support all of the latest syntax that ESLint 8 includes, such as top level await #1548
[17.0.0-0] - 2022-01-31

We're finally able to offer a pre-release of ESLint 8 based standard 17!

This major release fully focuses on getting in sync with the wider ESLint ecosystem and doesn't in itself introduce any new rules or features.

This pre-release exists to test out the ESLint 8 related changes and discover possible backwards incompatible changes that comes with it and mitigate unintended such before a stable release.

When you upgrade, consider running standard --fix to automatically format your
... (truncated)
Commits
- d511a2b 17.0.0
- 67af3a4 Update CHANGELOG.md
- 2ca9ad4 Update dependencies
- 717ae8e Disable/remove packages broken for other reasons
- 41a78f3 Disable packages broken by eslint 7.19.0
- 72774e8 Disable packages broken by eslint-plugin-n
- 0dd0ea4 build(deps): bump actions/checkout from 2 to 3
- ca1219c Merge pull request #1776 from standard/prerelease-17.0.0
- 439b57c chore: add CHANGELOG entry
- a16c41a 17.0.0-2
- Additional commits viewable in compare view
Maintainer changes

This version was pushed to npm by voxpelli, a new releaser for standard since your current version.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
16

chore(deps): bump minimist from 1.2.5 to 1.2.6
Bumps minimist from 1.2.5 to 1.2.6.
Commits
- 7efb22a 1.2.6
- ef88b93 security notice for additional prototype pollution issue
- c2b9819 isConstructorOrProto adapted from PR
- bc8ecee test from prototype pollution PR
- See full diff in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.

A CLI tool for integrating Tailwind CSS into Angular-CLI projects

ng-tailwindcss