Notoriously Problematic Merge

    @mw-angular/tailwindcss-builder

    2.0.0 • Public • Published

    @mw-angular/tailwindcss-builder

    This is the Angular CLI builder for TailwindCSS.

    Getting Started

    1. Use the package manager to install library.
    $ npm install -D tailwindcss postcss postcss-import autoprefixer @mw-angular/tailwindcss-builder
    
    1. Create and configure file tailwind.config.js, according to official documentation here.

    You can omit purge option, it will be configured or enhanced for particular project automatically.

    Example:

    module.exports = {
      darkMode: false,
      theme: {
        extend: {},
      },
      variants: {
        extend: {},
      },
      plugins: [],
    }
    
    1. Create CSS file tailwind.css.

    Example:

    @import "tailwindcss/base";
    @import "./custom-base-styles.css";
    
    @import "tailwindcss/components";
    @import "./custom-components.css";
    
    @import "tailwindcss/utilities";
    @import "./custom-utilities.css";
    
    1. Configure target in angular.json.
    "projects": {
      "website": {
        "architect": {
          ...
          "tailwindcss": {
            "builder": "@mw-angular/tailwindcss-builder:general",
            "options": {
              "themes": [
                {
                  "configFile": "libs/design-system/src/styles/tailwind.config.js",
                  "cssFile": "libs/design-system/src/styles/tailwind.css",
                  "outputPath": "apps/website/src/styles",
                  "outputFileName": "my-theme-name"
                }
              ]
            }
          },
          ...
        }
      }
    }
    

    As you can see, you can configure multiple themes.

    1. Run ng run website:tailwindcss.

    For each theme two files will be created, one for development and one for production.

    Don't forget to run this command each time you change tailwind configuration or input css file and before production build.

    It is recommended to commit them.

    To use this files add them to angular.json file for particular project:

    "projects": {
      "website": {
        "architect": {
          ...
          "build": {
            "builder": "...",
            "options": {
              ...
              "styles": [
                "apps/website/src/styles/my-theme-name.dev.css"
              ],
              ...
            },
            "configurations": {
              "production": {
                ...
                "styles": [
                  "apps/website/src/styles/my-theme-name.css"
                ],
                ...
              }
            }
          },
          "test": {
            "builder": "...",
            "options": {
              ...
              "styles": [
                "apps/website/src/styles/my-theme-name.dev.css"
              ],
              ...
            }
          },
          ...
        }
      }
    }
    

    Contributing

    Pull requests to the repository are welcome. For major changes, please open an issue first to discuss what you would like to change.

    Please make sure to update tests as appropriate.

    Authors

    License

    This project is licensed under the terms of the MIT license.

    You can check out the full license here.

    Install

    npm i @mw-angular/tailwindcss-builder

    DownloadsWeekly Downloads

    2

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    11.5 kB

    Total Files

    11

    Last publish

    Collaborators

    • misticwonder