Denali-css-theme NPM

Denali CSS Library

jsDelivr hits (GitHub)

Background

Introducing Denali V3, a dynamic theme built upon the robust foundation of Daisy UI. By harnessing the power of Daisy UI, developers can effortlessly access the extensive range of components and utilities provided by TailwindCSS, resulting in unparalleled flexibility. Our primary objective is to foster seamless consistency between design and development, enabling a swift workflow and simplified maintenance.

You can view Daisy Ui Components and all TailwindCSS Utilities

Example Projects

Quick Install

Installation

Install TailwindCSS by running the following command:

npm install tailwindcss

Next up install Denali CSS Theme Package

npm install denail-css-theme

Now you will need to create a "tailwind.config.js" file in your main folder directory. Add the following:

module.exports = {
    presets:[
      require('denali-css-theme/tailwindcss.config.js')
    ],
    content: ['./public/*.html'],
  }

Modify content key to match your type of file format. This will be used to purge any unused styles.

Create am "app.css" in the same directory. Paste the following imports:

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

@import 'denali-css-theme/theme.css';

If you already have a compiler setup use that or you can use TailwindCSS directly and live-server. You would run

npm install 'live-server';

And then update you package.json scripts with the following:

{
  "scripts": {
    "watch:css": "npx tailwindcss -c ./tailwind.config.js -i ./app.css -o public/output.css",
    "serve": "live-server ./public",
    "dev": "npm run watch:css & npm run serve",
    "all": "npm-run-all watch:css serve"
  },
  "dependencies": {
    "denali-css-theme": "file:../denali-css",
    "live-server": "^1.2.2",
    "tailwindcss": "^3.3.2"
  }
}