https://github.com/matheusdavidson/ng-tw

Tailwind components for angular
https://github.com/matheusdavidson/ng-tw

Last synced: 5 days ago
JSON representation

Tailwind components for angular

• Host: GitHub
• URL: https://github.com/matheusdavidson/ng-tw
• Owner: matheusdavidson
• Created: 2022-01-28T01:31:25.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2022-12-19T01:59:08.000Z (almost 2 years ago)
• Last Synced: 2023-04-13T03:06:10.420Z (over 1 year ago)
• Language: TypeScript
• Size: 2.61 MB
• Stars: 6
• Watchers: 1
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
> This lib is still under construction however some components are still working.

# Angular components for Tailwind CSS

ng-tw is a set of components to use tailwind css with angular, created with love to the community.

### Demo, playground and documentation

https://ng-tw.mtda.me

### Install

Add `ng-tw`, `tailwind` and `@angular/cdk` dependency to your project:

```bash 

npm install ng-tw @angular/cdk tailwindcss

````

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:

```scss 

@import '@angular/cdk/overlay-prebuilt.css';

```

### Tailwind Config

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