Skip to main content

How to Setup TailwindCSS in Angular?

In this article, we will discuss "How to Setup TailwindCSS in Angular". "TailwindCSS" is known as utility first CSS framework, we can rapidly build modern websites without ever leaving the HTML. TailwindCSS is different from other CSS frameworks like Bootstrap, etc. You can create whatever you want as per the required UI using the given utility class (CSS class).

Setup Angular Project


You can use the following "ng new" command into the terminal to setup the Angular project.
ng new ng-project

You can skill this step if already have a running Angular project.

Install tailwindcss


Install tailwindcss via the following npm command.
npm install -D tailwindcss postcss autoprefixer

Then run the "npx init" command to generate a tailwind.config.js file.
npx tailwindcss init

Configure template paths


Update the following code snippet to tailwind.config.js.
content: [
 "./src/**/*.html,ts",
],

Update style.css


Open "scr/style.css" and add the "Tailwind directives to your CSS".
@tailwind base;
@tailwind components;
@tailwind utilities;

Serve Angular Application


Let's serve the Angular app.
ng serve

Test tailwindCSS


Open the app.component.html and add the following code.
<div class="container">
 <h1 class="text-3xl font-bold underline bg-black text-white">
 Hello world!
 </h1>
</div>

Recommendations


Personally, I don't recommend it if you are new to CSS, not because is hard but because it makes you lazier. If you are new, then please write your CSS manually so you can understand what's working behind it. Here, lots of utility (CSS) classes are available which you can add to your HTML to make your desired layout. Also, when we add classes into the HTML. It makes our HTML very dirty. To overcome this issue, you have to put the TailwindCSS classes in your CSS/SCSS files. Please check the following example.
.btn 
 @apply py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-400

Notice I'm using the "@apply". After that, you can use the ".btn" class only with your HTML. Using this way our HTML looks clean.
<button class="btn">Hello</button>

Install TailwindCSS plugins (Optional)


TailwindCSS provides some additional plugins, that are optional to install as per your requirements.

You can install those plugins using the following npm command.
npm install -D @tailwindcss/typography @tailwindcss/forms @tailwindcss/line-clamp @tailwindcss/aspect-ratio

Configure tailwindCSS plugins


Update tailwind.config.js file as follows.
module.exports = 
 theme: 
 // ...
 ,
 plugins: [
 require('@tailwindcss/typography'),
 require('@tailwindcss/forms'),
 require('@tailwindcss/aspect-ratio'),
 require('@tailwindcss/line-clamp'),
 // ...
 ],

Optional fix for error


If you face the following error in creating the build.
⠸ Generating browser application bundles (phase: building)...(node:7416) UnhandledPromiseRejectionWarning: HookWebpackError: Transform failed with 1 error:
error: Invalid version: "15.2-15.3"
 at makeWebpackError (E:\ng-project\node_modules\webpack\lib\HookWebpackError.js:48:9)
 at E:\ng-project\node_modules\webpack\lib\Compilation.js:3055:12
 at eval (eval at create (E:\ng-project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:54:1)
 at processTicksAndRejections (internal/process/task_queues.js:93:5)

You have to add the following to the end of the ".browserslistrc" file located at the root of the project.
not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
not ios_saf 15.2-15.3
not safari 15.2-15.3

For more details, you can refer to this angular-CLI issue.

Conclusion


In this article, we are discussing "How to Setup TailwindCSS in Angular". Hope you like this article. Please feel free to add comments if any queries or suggestions.

Keep learning & stay safe :)



You may like:

How to Manage Password Strength – Angular

How to use trackBy in Angular with Example

Comments

Post a Comment

Popular posts from this blog

Basic Use of Model Factories in Laravel

In this article, we will discuss the basic use of Model Factories in Laravel. Laravel comes with the feature called model factories that are offered to made fake models quickly. It’s used in the database testing and database seeding. Let’s start the discussion on this feature by... Read out the full post at here
Post a Comment
Read more

How to setup Amazon Kinesis Data Stream with Amazon Pinpoint (Part 3)?

In this article, we will discuss "How to setup Amazon Kinesis Data Stream with Amazon Pinpoint (Part 3)?". This article is the third part of our Amazon Pinpoint Series. For better understanding, I recommend to readout the previous article. How to Setup AWS Pinpoint (Part 1) How to Setup AWS Pinpoint SMS Two-Way Communication (Part 2)? Streaming Amazon Pinpoint events to Kinesis In Amazon Pinpoint, when we send a transactional SMS or email message then an event will occur as per the action performed. In a simple way, Amazon Pinpoint sends information about events to Amazon Kinesis. Which, we read and process as per our requirement. We are talking about the SMS so we read the stream data to fetch the delivery reports of our SMSs. There are two types of streams given by the Amazon Kinesis such as Data Firehose, and Data Streams. Amazon Pinpoint can also stream data to Kinesis Data Streams, which ingests and stores multiple data streams for processing by analytics applications. F...
Post a Comment
Read more

How to Manage Elastic IP in AWS?

In this article, we will discuss "How to Manage Elastic IP in AWS?" . Here, you will learn the use of Elastic IP addresses and how to assign it to your EC2 Instance. If you are new with EC2 Instance then check out my previous article, "How to setup an EC2 Instance on AWS" . EC2 (Amazon Elastic Compute Cloud) provide us an ability to create, start, stop and terminate the instance at any time. This will creates a challenge with IP addresses, because restarting an instance or replacing a terminated instance with newly created instance, will result in a new IP address. Now the question is "How to reference a machine when the IP is constantly change?" . We can handle this situation with the use of Elastic IP address. We can associate a single Elastic IP address to different Ec2 Instances. You can immediately associate a new Ec2 Instance with the Elastic IP address if the EC2 instance is stopped or terminated. After the back-end EC2 instance changes, our exist...
Post a Comment
Read more