Single command to integrate tailwind CSS with angular.

Single command to integrate tailwind CSS with angular.

Learn how to integrate tailwind css with angular within 5 minutes.

Hey, guys today in this blog I will show how to use tailwindcss with angular. So let's begin this.

  1. First let's create a fresh angular project using ng new command.
  2. Open the project in terminal or integrated terminal of vs code and run the below given command.
  3. Then choose whether you want to use tailwind JIT or not. image.png
  4. Now choose whether you want to use tailwind darkmode or not. If yes choose whether you want media based dark mode or class based. image.png
  5. Then choose which plugins you want to use.
    - If you want to use all plugins, press `a`
    - Press `space` to select particular plugin
    - press `i` to invert the selection
    
    image.png
  6. During the installation, it will create new tailwind.config.js file add following lines to styles.scss file.
  7. Now everything is configured to use tailwind css with angular. Now let's check whether it works or not.
  8. Write the below given html in app.component.html file.
  9. Now run the angular server.
  10. The following result should be displayed. If your result is same as mine, then tailwind css and angular have been configured successfully. image.png