How to implement the Tailwind CSS with Custom Angular Library ?

Tailwind CSS is basically a Utility-first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Also, it is a cool way to write inline styling and achieve an awesome interface without writing a single line of your own CSS.

Angular is a client-side TypeScript-based, front-end web framework developed by the Angular Team at Google, that is mainly used to develop scalable single-page web applications(SPAs) for mobile & desktop. Angular CLI (Command Line Interface) is a powerful tool that provides developers with a set of commands for creating, building, testing, and deploying Angular applications and libraries.

Integrating Tailwind CSS into a custom Angular library is widely used in regular Angular projects. In this article, we will see how to use Tailwind CSS in a custom Angular library. Before proceeding, make sure that the Node.js & NPM must be installed in the system.

Steps to Configure TailwindCSS with Angular Library

Step 1: Setup a new project by creating a new directory

• To make the new directory use the 'mkdir' command.

mkdir Tailwind-angular

• Now, navigate inside that directory using the 'cd' command

cd Tailwind-angular

Step 2: Install the Angular CLI

To Install it write the following command in the terminal

npm install -g @angular/cli

Step 3: Creating a new angular project

Make a new angular project via the command 'ng new my-angular-app' and move inside it by 'cd' commands.

ng new my-angular-app
cd my-angular-app

Step 4: Installing TailwindCSS

Install tailwind using NPM using this command

npm install tailwindcss --save-dev

Step 5: Create a Tailwind CSS configuration file

Run the init command from Tailwind CSS to create a new tailwind.config.js file inside the project directory

npx tailwindcss init

// tailwind.config.js
module.exports = {
    content: [],
    theme: {
        extend: {},
    },
    plugins: [],
}

Step 6: Import the Tailwind CSS Directives

Add the layer directives of tailwind CSS by writing the following code inside the “./src/styles.css file"

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 7: Configure your tailwind.config.js

To do that go inside “tailwind.config.js” and update it as given below, so that it will apply tailwind-CSS in all the files.

module.exports = {
    content: [],
    theme: {
        extend: {},
    },
    plugins: [],
}

• Line to update

content: [
    "./src/**/*.{html,ts}", // add this line
  ]

• After adding the above line:

module.exports = {
    content: [
        "./src/**/*.{html,ts}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

Step 8: Project Structure

The below project structure will be generated by following the above commands:

Step 9: Run the Application

The below line of code will generate a localhost server, & follow the server link to open the application on the web browser.

ng serve --open

Example 1: This example illustrates the setting up of Tailwind-CSS with the Angular Library. In the following code, we are using the text class with a <h1> tag & including the bold style which makes the content bold and underlines it. Add Tailwind’s utility classes to style your content inside "./src/app/app.component.html"

<h1 class="text-3xl font-bold underline">
    GeeksforGeeks
</h1>

Output: To run it write the following command in the terminal ng serve --open

Example 2: This example illustrates the successful execution of code after setting up Tailwind-CSS with the Angular Library. In the following code, we are using Tailwind class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 rounded-full" with Button tag which makes the button background blue, text white and round the corners and it changes color when we hover on it.

<button class="bg-blue-500 
               hover:bg-blue-700 
               text-white 
               font-bold py-2 rounded-full">
    clickMe
</button>

Output: