Hello developer, I found angular, angular material, and tailwindcss great combination. it saves a lot of time and extra code which maintains the DRY(Don’t repeat yourself) principle.
In this tutorial, I am going to show how to add tailwindcss in an angular project.
let’s generate an angular project
Note: make sure you have angular CLI and my suggestion is always to use the angular latest version for new projects.
ng new angular-tailwind
After generating your project
Let’s integrate tailwind with the angular base package
ngneat/tailwind is a schematic way, can add Tailwind CSS to Angular applications.
To setup tailwind input this command
ng add @ngneat/tailwind
When you command, ngneat/tailwind schematically detect completable version, so there will be some question to set ngneat/tailwind package…
- ? Would you like to enable Tailwind JIT (preview feature)? Yes
- ? Would you like to enable dark mode? class
- ? What @tailwindcss plugins do you want to enable? forms, typography
The tailwind JIT(Just In Time) feature is great. most of the time I used it. JIT feature only support version 7 or later.
let check what heppand
When you finish the question you can see,
- CREATE tailwind.config.js: tailwind config file is created, where you can your custom tailwindcss configration
- UPDATE package.json: ngneat/tailwind and tailwindcss package will add
- UPDATE src/styles.scss: Tailwindcss css will import in this file
tips: If you are using angular material than make sure your tailwindcss bottom of angular material css - UPDATE src/index.html: dark mode class will add in body tag.
Integrate tailwindcss manually
Add tailwindcss package in dev dependacy
npm install -D tailwindcss
Two peer dependencies postcss and autoprefixer is required Tailwind CSS
npm install [email protected] [email protected]
Generate tailwindcss config file
Make sure you have globally installed npx in your machine
npx tailwindcss init
now you can see tailwind.config.js file created. and in your tailwind.config.js file contain …
module.exports = { purge: [], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }
Great now add tailwindcss css file in your global styles.css file
Again make sure your angular material CSS file is above
/* Material import above */ @import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; /* You can add global styles to this file, and also import other style files */
Use example
In your app.component.html file, add a tailwind card
<div class="max-w-md py-4 px-8 bg-white shadow-lg rounded-lg my-20"> <div class="flex justify-center md:justify-end -mt-16"> <img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"> </div> <div> <h2 class="text-gray-800 text-3xl font-semibold">Tailwind Design</h2> <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p> </div> <div class="flex justify-end mt-4"> <a href="#" class="text-xl font-medium text-indigo-500">Sajal Mia</a> </div> </div>