Different ways to add CSS styles to Angular components

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 the 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.

Tailwind CSS is a popular CSS framework like Bootstrap, Bulma, and Angular Material. You can check my other post on Adding foundation in Angular

Create Angular Application

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

ng --version

if it gives an ‘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 whether angular CLI is installed correctly or not use 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 [email protected] [email protected]

It installs and adds tailwindcss as the 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 a tailwind.config.js file with the 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