ng-tw - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

package.json

 {
   "name": "ng-tw",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "peerDependencies": {
@@ -5,0 +5,0 @@ "@angular/common": "^13.1.0",

README.md

@@ -1,24 +0,86 @@
-# NgTw
+> This lib is still under construction however some components are still working.
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.1.0.
+# Angular components for Tailwind CSS
 
-## Code scaffolding
+ng-tw is a set of components to use tailwind css with angular, created with love to the community.
 
-Run `ng generate component component-name --project ng-tw` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ng-tw`.
-> Note: Don't forget to add `--project ng-tw` or else it will be added to the default project in your `angular.json` file. 
+### Demo, playground and documentation
 
-## Build
+https://ng-tw.mtda.me
 
-Run `ng build ng-tw` to build the project. The build artifacts will be stored in the `dist/` directory.
+### Install
 
-## Publishing
+Add `ng-tw`, `tailwind` and `@angular/cdk` dependency to your project:
 
-After building your library with `ng build ng-tw`, go to the dist folder `cd dist/ng-tw` and run `npm publish`.
+```bash 
+npm install ng-tw @angular/cdk tailwindcss
+````
 
-## Running unit tests
+We use `@angular/cdk` mostly for overlay components like notification, select and others, in order to make it work on a minimum setup you'll need to import their css in your style.scss:
 
-Run `ng test ng-tw` to execute the unit tests via [Karma](https://karma-runner.github.io).
+```scss 
+@import '@angular/cdk/overlay-prebuilt.css';
+```
 
-## Further help
+### Tailwind Config
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+First you'll need to setup tailwind on your angular project, to do that you can follow the setup documentation on tailwind website.
+
+With angular +12 the process is pretty straight forward and since this lib was made with angular +13 you shouldn't have much problems to setup tailwind.
+
+#### Color config
+
+The theme design is based on a set of colors to make it easy to use inside components.
+
+- primary
+- secondary
+- danger
+- warning
+
+#### Color config in `tailwind.config.js`
+
+```typescript
+const colors = require('tailwindcss/colors');
+
+module.exports = {
+    //...
+    theme: {
+        extend: {
+            colors: {
+                primary: { ...colors.indigo, DEFAULT: colors.indigo[500] },
+                secondary: { ...colors.pink, DEFAULT: colors.pink[500] },
+                danger: { ...colors.red, DEFAULT: colors.red[500] },
+            },
+        },
+    },
+    variants: {
+        extend: {
+            opacity: ['disabled'],
+            backgroundColor: ['disabled'],
+        },
+    },
+    //...
+}
+```
+
+#### Disabled Variants
+
+> It's also important to note that you should add the disabled variant for opacity and backgroundColor.
+
+#### Content
+
+Tailwind uses purge to make the bundle size smaller, you'll need to setup the lib in the `content` section of your `tailwind.config.js` to make it work
+
+```js
+module.exports = {
+    //...
+    content: [..., './node_modules/ng-tw/**/*'],
+    //...
+}
+```
+
+## Further documentation
+
+For more instructions and documentation:
+
+https://ng-tw.mtda.me

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

774460

increased by0.16%

Number of lines in readme file

87

increased by248%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes