As I mentioned on that article, when you're working with tailwindcss you will find certain scenarios where you could think "Too much duplicated code". But if you are working with any modern JS framework like Angular, you will drastically reduce this duplication by extracting reusable components.
So I thought it could be useful to show you how to do this using the same tailwindcss snippets from my past article.
1- Colorful notes
This component is super simple and will allow us to customize both color and content
<colorful-notecolor="red"title="Note"description="Lorem ipsum dolor sit amet..."></colorful-note><colorful-notecolor="blue"title="Note"description="Lorem ipsum dolor sit amet..."></colorful-note><colorful-notecolor="green"title="Note"description="Lorem ipsum dolor sit amet..."></colorful-note><colorful-notecolor="yellow"title="Note"description="Lorem ipsum dolor sit amet..."></colorful-note>
2- Three columns card grid
For this component, I'm gonna use the Smart/Dumb pattern. If you don't know this pattern, please checkout this article.
TL;DR
Dumb component: It is a component that for received data (inputs), will always look and behave the same, possibly also producing other data
Smart components: It is not only dependant on its’ inputs, but also on some kind of external data (“the outer world”), which is not passed directly via @Input(). It might also produce some side effects that are not emitted through the @Output() interface
My smart component for this implementation will be called Grid component, and will we be used for:
Retrieving a list of articles
Displaying each article using the dumb component
Finally, my dumb component will be called Grid item component and will be used to render each article using the data received from the smart component.
What's really powerful about this dumb component is that it's super generic, so you'll be able to use it in other scenarios.
Grid component (Smart):
// Class used to transfer data between componentsexportclassArticle{title:string;description:string;imgUrl:string;link:string;}// grid.component.ts@Component({selector:'grid',templateUrl:'./grid.component.html',styleUrls:['./grid.component.css']})exportclassGridComponentimplementsOnInit{articles:Article[]=[]constructor(){}ngOnInit(){this.getArticles()}getArticles(){// Get data and set articles...}}
A collection of reusable components built with Angular and tailwindcss
Reusable components
This project was generated with Angular CLI version 8.0.3.
Development server
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Code scaffolding
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Build
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.