Different ways to apply CSS styles to components in Angular application

Angular component styles: In this tutorial, learn different ways to add styles to angular components with examples.

Styles in Angular components are used to make UX and UI better using CSS programming language.

There are multiple ways to style.

• Styles
• styleUrls
• Inline styles in template
• Import CSS

Angular 13 TailwindCSS Example

• Step 1 Create Angular Application
• Step 2 Add TailwindCSS dependency to angular using npm
• Step 3 Create tailwind configuration
• Step 4 Add tailwind CSS styles globally
• Step 5 Angular component to use tailwind component.

Create Angular Application

Check Angular CLI is installed or not using the below command.

ng --version

if it gives ‘ng command not found` error, You need to install ng command is an angular CLI to create an angular application with a prototype folder structure

Install Angular CLI using the below command

npm install -g @angular/cli

It installs angular CLI globally and the ng command works now.

To check angular CLI installed correctly or not using the below command.

B:\blog\nodejsless>ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 13.0.3
Node: 14.17.0
Package Manager: npm 7.11.1
OS: win32 x64

Angular: undefined
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1300.3
@angular-devkit/core         13.0.3
@angular-devkit/schematics   13.0.3
@angular/cli                 13.0.3
@schematics/angular          13.0.3

The next step is to create an angular application

ng new angular-tailwindcss-app

Create an application with default settings and create an application blueprint with required dependencies.

Once the application is created, Please run the application

npm run start 
(or)
ng serve

It runs the angular application and is accessed at http://localhost:4200

Add TailwindCSS to angular using npm

There are multiple ways we can integrate into angulars such as tailwind CLI and postcss approach.

tailwindcss is an npm library wrapper for the Tailwind CSS framework.

First, Install tailwindcss as a devDependencies(-D) into the angular app Next also install postcss

npm install -D tailwindcss postcss@latest autoprefixer@latest

It installs and adds tailwindcss as devDependencies section in package.json.

{
  "devDependencies": {
    "tailwindcss": "^3.0.1",
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.5"
  }
}

Create tailwind configuration

The next step is to create a tailwind configuration.

You can create a tailwind.config.js file manually or using the tailwind CLI tool.

In the application root folder, run the below command to create tailwind.config.js

A:\angular-tailwindcss-app>npx tailwindcss init

Created Tailwind CSS config file: tailwind.config.js

It creates tailwind.config.js file with below content

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

Add tailwind CSS styles globally

You have to include tailwind base, components, and utility components into application style files.

If your application is using CSS, You have to include the below CSS in styles.css

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

incase, if the application uses sass, you have to import tailwind CSS components

styles.scss

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Angular component to use tailwind component.

In angular app.component.html, you can use tailwind components and apply styles in app.component.scss

In this component, Going to add a button with styles to the angular component.

Next add button code to app.component.html

<h1 class="text-3xl font-bold underline">
  Simple Tailwindo CSS application
</h1>
<button class="btn btn-blue">
  Submit
</button>

In app.component.scss, please add button styles

.btn-blue {
    @apply bg-red-500 text-white;
    :hover {
        @apply bg-red-700;
      }
  }
  .btn {
    @apply font-bold py-2 px-4 rounded;
  }

This shows the tailwind CSS styles button on the page.

Conclusion

Step by step tutorial explained about

• install Angular 13 cli
• Create a new angular application
• Integrate tailwindcss into the angular app
• Configure foundation CSS/scss styles
• Create an Angular component
• Tailwind CSS Button example