Install TailwindCSS and DaisyUI CSS Plugin with Angular

#tailwindcss #daisyui #angular #sass

This blog post is dedicated to giving a well-deserved shoutout to DaisyUI.

DaisyUI is a free, open-source plugin for Tailwind CSS that offers a collection of beautiful, pre-designed UI components and breathtaking themes (that are easily customisable).

With over 45 components (and growing), daisyUI makes it easy to create stunning web pages without having to write any custom CSS. DaisyUI includes components like carousels, modals, and dropdowns. And the best part is that many of these components are interactional and working without any JavaScript involved.

With daisyUI, I can quickly create a visually appealing user interface. This is especially useful when I am working on my learning or teaching projects, where I don't want to spend any time on styling the page with custom CSS but still want my application to look super nice.

Here is an example of little side project I created for my students and thanks to DaisyUI adding beautiful styles was effortless!

Installation

I am going to assume that your project is created using Angular CLI.

ng new my-project
cd my-project

Install Tailwind and DaisyUI via npm:

npm install -D tailwindcss daisyui

Add the tailwind directives for each of Tailwind’s layers to your ./src/styles.scss file.

/* You can add global styles to this file, and also import other style files */

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

Create tailwind.config.js (manually or use npx tailwindcss init command and add daisyui plugin:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
  daisyui: {
    themes: true,
    styled: true,
    themes: true,
    base: true,
    utils: true,
    logs: true,
    rtl: false,
  },
}