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.
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 postcss@latest autoprefixer@latest
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