Roadmap Q1/Q2 2021

Hi all,

First of all, allow me and the contributors to thank you for your supports for ngneat/tailwind.

Second of all, join me to congratulate @beeman and @vltansky as they are new Maintainers of ngneat/tailwind, alongside me. This will greatly help us keeping track of this repo as well as updates in the ecosystem 🎉

This issue will act as our public Roadmap for the first half of 2021. Though ngneat/tailwind is a very small utility package, we want to be as transparent as possible as to what to expect from it.

As most of you have already know, Angular (v11.2+) has built-in support for TailwindCSS. This is a great initiative from the AngularCLI team. However, their implementation is quite rudimentary, if not half-baked, as Angular’s support does not cover Purging use-case and it seems like they are very opinionated about what they want to support as far as TailwindCSS goes. You can check out related issues here and here

Note on Purging: TailwindCSS is currently working on JIT compilation which will negate the need of purging. We will have more updates when that is finalized and stable from the TailwindCSS side.

That said, we are going to continue maintaining ngneat/tailwind. Here is what you can expect in the future release(s):

• ngneat/tailwind will check if your project is running v11.2 of Angular.
  • If yes, then ngneat/tailwind will execute a slightly newer flow
  • If no, then ngneat/tailwind will execute the current flow, which is working for most Angular projects that are under 11.2

New flow

• ngneat/tailwind will ride on top of AngularCLI support for Tailwind. This means that we will not leverage any custom webpack anymore.
• ngneat/tailwind will still initialize a tailwind.config.js for you without you having to execute npx tailwindcss init
• ngneat/tailwind will also setup Purging out of the box with a custom flag.
• ngneat/tailwind will export a custom Tailwind plugin to handle ViewEncapsulation in Components’ styles. Right now, this is handled by a custom PostCSS plugin but since we won’t be using Custom Webpack, we cannot utilize a PostCSS plugin.
• ngneat/tailwind will export the Custom Tailwind Plugin and the Purging flag as Public API so the consumers can reference if need be.

Thank you!

[sonntag-philipp]

Install TailwindCSS with Angular >= v11.2 and TailwindCSS >= v3

This project is no longer necessary for basic functionality in newer projects as I can see for now.

You can just add the tailwindcss package to your project and configure it using the tailwind.config.js. No additional packages are needed. If you want to get rid of the missing peer dependency messages, just install them even though they’re not necessary as they’re already included in Angular.

Official Guide is now available

tailwind.config.js

module.exports = {
  content: [
    './src/app/**/*.{html,ts}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  important: true
};

Note the important at the bottom. I’ve used it there to forcefully overwrite rules by @angular/material. When you don’t use other libraries this may not be necessary.

Add this to your project styles.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Et voilá, that should be it.

[NetanelBasal]

https://blog.tailwindcss.com/just-in-time-the-next-generation-of-tailwind-css

That’s awesome