DEV Community

Cover image for Install TailwindCSS and DaisyUI CSS Plugin with Angular
Dino Dujmovic
Dino Dujmovic

Posted on • Edited on

Install TailwindCSS and DaisyUI CSS Plugin with Angular

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!

Movie Database Demo Project


Installation

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



ng new my-project
cd my-project


Enter fullscreen mode Exit fullscreen mode

Install Tailwind and DaisyUI via npm:



npm install -D tailwindcss daisyui


Enter fullscreen mode Exit fullscreen mode

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';


Enter fullscreen mode Exit fullscreen mode

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,
},
}

Enter fullscreen mode Exit fullscreen mode




References:

Top comments (2)

Collapse
 
carlos8alb profile image
Carlos Albarracin

Why and when you use postcss and autoprefixer?

Collapse
 
digitaldino profile image
Dino Dujmovic

Ups, I don't. Sry, wrong doc copy ^^)
Updated.