UPDATES

Easy methods to set up Angular with Tailwind CSS and the UI parts from Flowbite


Angular is a free and open-source single-page net framework written in TypeScript utilized by thousands and thousands of builders and tasks that may provide help to construct and scale your net functions through the use of options like parts, routing, type administration, API calls interface, and extra.

The framework was launched by the Google crew in 2010 and it’s utilized by web sites reminiscent of Upwork, Forbes, Gmail, YouTube, Udacity, and extra together with many of the Google Suite apps.

Comply with this information to learn to arrange a brand new Angular challenge with Tailwind CSS and combine the open-source UI parts from the Flowbite Library.



Create Angular challenge

The really useful and quickest technique to get began with creating a brand new Angular challenge is by putting in the official CLI device by working the next command in your terminal:

npm set up -g @angular/cli
Enter fullscreen mode

Exit fullscreen mode

This command will make the Angular CLI out there in your native laptop.

Run the next command to create a brand new Angular challenge:

ng new my-app
Enter fullscreen mode

Exit fullscreen mode

You may observe the directions from the CLI prompts to pick out the choices that you just need to select when creating a brand new challenge – it’s best to choose “CSS” when requested.

This command will create a brand new folder referred to as my-app the place you’ve gotten all the required supply information to begin a brand new native and production-ready Angular challenge.

Run the ng serve --open command in your terminal to begin a neighborhood server:

ng serve --open
Enter fullscreen mode

Exit fullscreen mode

It will create a neighborhood improvement server and robotically open a brand new tab on the localhost:4200 port by including the --open flag to the command.

Congratulations! Now you’ve gotten a totally working Angular challenge put in and configured.



Set up Tailwind CSS

Now that you have succesfully put in and configured an Angular challenge we are able to proceed with putting in the preferred utility-first CSS framework referred to as Tailwind.

Set up Tailwind CSS and Publish CSS through NPM by working the next command:

npm set up tailwindcss postcss autoprefixer --save-dev
Enter fullscreen mode

Exit fullscreen mode

This command will set up all of the dependencies of Tailwind CSS out there in your bundle.json file.

Run the init command from Tailwind CSS to create a brand new tailwind.config.js file:

npx tailwindcss init
Enter fullscreen mode

Exit fullscreen mode

Replace the newly generated config file to arrange the supply template information from Angular:

/** @sort {import('tailwindcss').Config} */
module.exports = {
  content material: [
    "./src/**/*.{html,ts}", // add this line
  ],
  theme: {
    prolong: {},
  },
  plugins: [],
}
Enter fullscreen mode

Exit fullscreen mode

Import the core Tailwind directives contained in the kinds.css file:

/* You may add world kinds to this file, and in addition import different fashion information */

@tailwind base;
@tailwind parts;
@tailwind utilities;
Enter fullscreen mode

Exit fullscreen mode

Begin a neighborhood improvement server on Angular by working ng serve --open. Should you already had one open then you have to restart it to permit Angular to internally arrange the brand new configuration.

Congratulations! Now you can begin utilizing the utility lessons from Tailwind CSS inside your Angular challenge.



Set up Flowbite

Now that you’ve got each Angular and Tailwind CSS configured to your net utility challenge you’ll be able to proceed by putting in the Flowbite Library to begin leveraging the interactive UI parts reminiscent of navbars, modals, playing cards, buttons, and extra to construct person interfaces sooner with Tailwind CSS assist.

Set up and require Flowbite as a dependency through NPM to your bundle.json file:

npm set up flowbite
Enter fullscreen mode

Exit fullscreen mode

Require the Flowbite plugin inside your tailwind.config.js file:

/** @sort {import('tailwindcss').Config} */
module.exports = {
  content material: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    prolong: {},
  },
  plugins: [
    require('flowbite/plugin') // add this line
  ],
}
Enter fullscreen mode

Exit fullscreen mode

Configure the template paths to incorporate the interactive Tailwind CSS lessons from Flowbite:

/** @sort {import('tailwindcss').Config} */
module.exports = {
  content material: [
    "./src/**/*.{html,ts}",
    "./node_modules/flowbite/**/*.js" // add this line
  ],
  theme: {
    prolong: {},
  },
  plugins: [
    require('flowbite/plugin')
  ],
}
Enter fullscreen mode

Exit fullscreen mode

Replace the app.element.ts file to make use of the initFlowbite perform to allow the interactive parts through knowledge attributes:

import { Element } from '@angular/core';
import { OnInit } from '@angular/core';
import { initFlowbite } from 'flowbite';

@Element({
  selector: 'app-root',
  templateUrl: './app.element.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'web-app';

  ngOnInit(): void {
    initFlowbite();
  }
}
Enter fullscreen mode

Exit fullscreen mode

It will let you allow parts such because the modals, navigation bars, dropdowns to dynamically arrange the performance through our knowledge attributes interface.



UI parts

Now that you’ve got put in all the frameworks and libraries you can begin utilizing the entire assortment of UI parts and templates from the Flowbite UI Library and Blocks.

Let’s first begin by copy-pasting one of many default modal element examples from the documentation and add it contained in the app.element.html file:

<!-- Modal toggle -->
<button data-modal-target="defaultModal" data-modal-toggle="defaultModal" class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center darkish:bg-blue-600 darkish:hover:bg-blue-700 darkish:focus:ring-blue-800" sort="button">
Toggle modal
</button>

<!-- Predominant modal -->
<div id="defaultModal" tabindex="-1" aria-hidden="true" class="mounted top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative w-full max-w-2xl max-h-full">
        <!-- Modal content material -->
        <div class="relative bg-white rounded-lg shadow darkish:bg-gray-700">
            <!-- Modal header -->
            <div class="flex items-start justify-between p-4 border-b rounded-t darkish:border-gray-600">
                <h3 class="text-xl font-semibold text-gray-900 darkish:text-white">
                    Phrases of Service
                </h3>
                <button sort="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center darkish:hover:bg-gray-600 darkish:hover:text-white" data-modal-hide="defaultModal">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="spherical" stroke-linejoin="spherical" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Shut modal</span>
                </button>
            </div>
            <!-- Modal physique -->
            <div class="p-6 space-y-6">
                <p class="text-base leading-relaxed text-gray-500 darkish:text-gray-400">
                    With lower than a month to go earlier than the European Union enacts new client privateness legal guidelines for its residents, firms around the globe are updating their phrases of service agreements to conform.
                </p>
                <p class="text-base leading-relaxed text-gray-500 darkish:text-gray-400">
                    The European Union’s Normal Information Safety Regulation (G.D.P.R.) goes into impact on Could 25 and is supposed to make sure a typical set of knowledge rights within the European Union. It requires organizations to inform customers as quickly as attainable of high-risk knowledge breaches that would personally have an effect on them.
                </p>
            </div>
            <!-- Modal footer -->
            <div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b darkish:border-gray-600">
                <button data-modal-hide="defaultModal" sort="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center darkish:bg-blue-600 darkish:hover:bg-blue-700 darkish:focus:ring-blue-800">I settle for</button>
                <button data-modal-hide="defaultModal" sort="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 darkish:bg-gray-700 darkish:text-gray-300 darkish:border-gray-500 darkish:hover:text-white darkish:hover:bg-gray-600 darkish:focus:ring-gray-600">Decline</button>
            </div>
        </div>
    </div>
</div>
Enter fullscreen mode

Exit fullscreen mode

Including this code ought to create a toggle button which on the clicking occasion ought to present a modal element. The interactivity is enabled through the info attributes interface from Flowbite.



Information attributes

The Flowbite Library is by default powered by the info attributes interface that you should utilize to simply arrange interactive parts by concentrating on parts immediately out of your template parts.

Let’s add a dropdown element from the UI library:

<button id="dropdownDefaultButton" data-dropdown-toggle="dropdown" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center darkish:bg-blue-600 darkish:hover:bg-blue-700 darkish:focus:ring-blue-800" sort="button">Dropdown button <svg class="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
    <path stroke="currentColor" stroke-linecap="spherical" stroke-linejoin="spherical" stroke-width="2" d="m1 1 4 4 4-4"/>
  </svg></button>

<div id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 darkish:bg-gray-700">
    <ul class="py-2 text-sm text-gray-700 darkish:text-gray-200" aria-labelledby="dropdownDefaultButton">
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100 darkish:hover:bg-gray-600 darkish:hover:text-white">Dashboard</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100 darkish:hover:bg-gray-600 darkish:hover:text-white">Settings</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100 darkish:hover:bg-gray-600 darkish:hover:text-white">Earnings</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100 darkish:hover:bg-gray-600 darkish:hover:text-white">Signal out</a>
      </li>
    </ul>
</div>
Enter fullscreen mode

Exit fullscreen mode

This instance also needs to present a button that on the clicking occasion will present a dropdown menu you can simply replace through Tailwind CSS and the info attributes API.



JavaScript API

Alternatively to the info attributes technique you can even select to programatically arrange the interactivity by immediately importing the parts from Flowbite and use the strategies and choices described within the documentation of Flowbite on the finish of every web page.

For instance, this is how one can arrange a carousel element immediately with JavaScript:

import { Carousel } from "flowbite";
import sort { CarouselItem, CarouselOptions, CarouselInterface } from "flowbite";

const $prevButton = doc.getElementById('data-carousel-prev');
const $nextButton = doc.getElementById('data-carousel-next');

$prevButton.addEventListener('click on', () => {
    carousel.prev();
});

$nextButton.addEventListener('click on', () => {
    carousel.subsequent();
});

const objects: CarouselItem[] = [
    {
        position: 0,
        el: document.getElementById('carousel-item-1')
    },
    {
        position: 1,
        el: document.getElementById('carousel-item-2')
    },
    {
        position: 2,
        el: document.getElementById('carousel-item-3')
    },
    {
        position: 3,
        el: document.getElementById('carousel-item-4')
    },
];

const choices: CarouselOptions = {
    defaultPosition: 1,
    interval: 3000,

    indicators: {
        activeClasses: 'bg-white darkish:bg-gray-800',
        inactiveClasses: 'bg-white/50 darkish:bg-gray-800/50 hover:bg-white darkish:hover:bg-gray-800',
        objects: [
            {
                position: 0,
                el: document.getElementById('carousel-indicator-1')
            },
            {
                position: 1,
                el: document.getElementById('carousel-indicator-2')
            },
            {
                position: 2,
                el: document.getElementById('carousel-indicator-3')
            },
            {
                position: 3,
                el: document.getElementById('carousel-indicator-4')
            },
        ]
    },

    // callback capabilities
    onNext: () => {
        console.log('subsequent slider merchandise is proven');
    },
    onPrev: ( ) => {
        console.log('earlier slider merchandise is proven');
    },
    onChange: ( ) => {
        console.log('new slider merchandise has been proven');
    }
};

const carousel: CarouselInterface = new Carousel(objects, choices);

carousel.cycle()

// set occasion listeners for prev and subsequent buttons
const $prevButton = doc.getElementById('data-carousel-prev');
const $nextButton = doc.getElementById('data-carousel-next');

$prevButton.addEventListener('click on', () => {
    carousel.prev();
});

$nextButton.addEventListener('click on', () => {
    carousel.subsequent();
});
Enter fullscreen mode

Exit fullscreen mode

You additionally have to have the next HTML markup out there inside your codebase and Angular template information:

<div class="relative w-full">
    <!-- Carousel wrapper -->
    <div class="relative h-56 overflow-hidden rounded-lg sm:h-64 xl:h-80 2xl:h-96">
         <!-- Merchandise 1 -->
        <div id="carousel-item-1" class="hidden duration-700 ease-in-out">
            <img src="/docs/photos/carousel/carousel-1.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
        </div>
        <!-- Merchandise 2 -->
        <div id="carousel-item-2" class="hidden duration-700 ease-in-out">
            <img src="/docs/photos/carousel/carousel-2.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
        </div>
        <!-- Merchandise 3 -->
        <div id="carousel-item-3" class="hidden duration-700 ease-in-out">
            <img src="/docs/photos/carousel/carousel-3.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
        </div>
        <!-- Merchandise 4 -->
        <div id="carousel-item-4" class="hidden duration-700 ease-in-out">
            <img src="/docs/photos/carousel/carousel-4.svg" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
        </div>
    </div>
    <!-- Slider indicators -->
    <div class="absolute z-30 flex space-x-3 -translate-x-1/2 bottom-5 left-1/2">
        <button id="carousel-indicator-1" sort="button" class="w-3 h-3 rounded-full" aria-current="true" aria-label="Slide 1"></button>
        <button id="carousel-indicator-2" sort="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2"></button>
        <button id="carousel-indicator-3" sort="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 3"></button>
        <button id="carousel-indicator-4" sort="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 4"></button>
    </div>
    <!-- Slider controls -->
    <button id="data-carousel-prev" sort="button" class="absolute top-0 left-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none">
        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 darkish:bg-gray-800/30 group-hover:bg-white/50 darkish:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white darkish:group-focus:ring-gray-800/70 group-focus:outline-none">
            <svg class="w-4 h-4 text-white darkish:text-gray-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                <path stroke="currentColor" stroke-linecap="spherical" stroke-linejoin="spherical" stroke-width="2" d="M5 1 1 5l4 4"/>
            </svg>
            <span class="hidden">Earlier</span>
        </span>
    </button>
    <button id="data-carousel-next" sort="button" class="absolute top-0 right-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none">
        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 darkish:bg-gray-800/30 group-hover:bg-white/50 darkish:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white darkish:group-focus:ring-gray-800/70 group-focus:outline-none">
            <svg class="w-4 h-4 text-white darkish:text-gray-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                <path stroke="currentColor" stroke-linecap="spherical" stroke-linejoin="spherical" stroke-width="2" d="m1 9 4-4-4-4"/>
            </svg>
            <span class="hidden">Subsequent</span>
        </span>
    </button>
</div>
Enter fullscreen mode

Exit fullscreen mode

On this case the benefit is you can management the behaviour of the parts as you would like having the ability to override the default settings.



Utilizing TypeScript

The Flowbite UI parts additionally helps TypeScript and you’ll import the kinds and apply them when utilizing the JavaScript API programatically.

For instance, this is how one can import the kinds for the Carousel element:

import sort { CarouselItem, CarouselOptions, CarouselInterface } from "flowbite";

// ... different code

const carousel: CarouselInterface = new Carousel(objects, choices);
Enter fullscreen mode

Exit fullscreen mode

You may learn extra about utilizing Flowbite and TypeScript by following our documentation information.



Angular Starter Undertaking

We constructed a free and open-source starter challenge on GitHub you can clone to make use of as a reference for this information and to your personal Angular net utility configured with Flowbite and Tailwind CSS.



Flowbite Angular Library

The superior open-source group from Flowbite additionally began engaged on a standalone Flowbite Angular library with native parts the place you can even contribute to the event of the challenge till a secure launch is achieved.

Disclaimer: this tutorial was first featured on the Angular + Tailwind CSS tutorial on the Flowbite Documentation.

Leave a Reply

Your email address will not be published. Required fields are marked *