Prerequisites
Before starting the project make sure to install the following utilities:
- Node LTS (18.x.x or higher recommended)
- Angular (14.x.x or higher recommended)
- Code editor. We recommend VSCode
Angular TW elements:
Currently we are working on a standalone Angular version of TW Elements.
If you want to know when it is going to be released, sign in in our
waiting list available here.
Creating a new Angular application
Let's create a fresh Angular application so that we can go through all the steps together.
Step 1
Install Angular CLI
npm install -g @angular/cli
Step 2
Create new project
ng new my-project
cd my-project
CSS when prompted.
Installing and configuring Tailwind CSS and TW Elements
Step 1
Install Tailwind CSS.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
File structure
If you have followed all instructions mentioned earlier, your file structure should look like this:
my-project/
├── node_modules/
├── src/
│ ├── app/
│ │ ├── app.component.html
│ │ ├── app.component.ts
│ │ └── ...
│ ├── assets/
│ | └── ...
│ ├── index.html
│ ├── main.ts
│ └── styles.css
├── angular.json
├── package-lock.json
├── package.json
├── postcss.config.js
├── tailwind.config.js
├── ...
└── tsconfig.spec.json
Step 2
Add the paths to all of your template files in your
tailwind.config.js file.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{html,ts}",
"./node_modules/tw-elements/js/**/*.js"
],
theme: {
extend: {},
},
darkMode: "class",
plugins: [require("tw-elements/plugin.cjs")]
}
Step 3
Add the @tailwind directives for each of Tailwind’s layers to
your styles.css file.
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap");
@tailwind base;
@layer base {
html {
@apply text-surface;
@apply bg-white;
}
html.dark {
@apply text-neutral-50;
@apply bg-body-dark;
}
}
@tailwind components;
@tailwind utilities;
p {
@apply leading-[1.6];
}
Step 4
Install TW Elements.
npm install tw-elements
Step 5
Import components which are you intend to use and necessary function
initTWE. Initialize initTWE in a lifecycle method.
import { Component } from '@angular/core';
import { Tooltip, initTWE } from 'tw-elements';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
ngOnInit() {
initTWE({ Tooltip });
}
}
<div class="mt-16 flex justify-center">
<p class="text-lg">
Hover the link to see the
<a
href="#"
class="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
data-twe-toggle="tooltip"
title="Hi! I'm tooltip"
>tooltip</a
>
</p>
</div>
Step 6
Start the app and see if everything's fine. Awesome! You're all set to dive into using TW Elements for your Angular project. Have fun!
ng serve --open
Initializing via JS
By default all components have autoinit which means they are initialized by data attributes. But if you want to make init by JavaScript - there is also possibility to do that.
Step 1
Import components which are you intend to use and initialize components in lifecycle hook.
import { Component } from '@angular/core';
import { Tooltip } from 'tw-elements';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
ngOnInit() {
const myTooltip = new Tooltip(document.getElementById('my-tooltip'));
}
}
<div class="mt-16 flex justify-center">
<p class="text-lg">
Hover the link to see the
<a
id="my-tooltip"
href="#"
class="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
title="Hi! I'm tooltip"
>tooltip</a
>
</p>
</div>