Smatchit Tailwind Project with DaisyUI

Setup Instructions

1. Create and Initialize Project:

   cd /your_workspace_path
   mkdir smatchit_tailwind_project
   cd smatchit_tailwind_project
   yarn init -y
   

2. Install Tailwind CSS and DaisyUI:

   yarn add tailwindcss daisyui
   npx tailwindcss init
   

3. Configure Tailwind CSS and DaisyUI: Edit tailwind.config.js:

   module.exports = {
     content: [
       "/smatchit/wwws/admin/*.html"
     ],
     theme: {
       extend: {},
     },
     plugins: [require('daisyui')],
   }
   

4. Create Tailwind CSS File:

   mkdir -p /smatchit/wwws/admin/static/css
   echo "@tailwind base;
   @tailwind components;
   @tailwind utilities;
   @import 'daisyui';" > /smatchit/wwws/admin/static/css/smatchittailwind.css
   

5. Build Tailwind CSS: Add script to package.json:

   {
     "scripts": {
       "build:css": "tailwindcss -i /smatchit/wwws/admin/static/css/smatchittailwind.css -o /smatchit/wwws/admin/static/css/smatchittailwind.css"
     }
   }
   

   Run the build script:

   yarn build:css
   

Usage

• Link the generated CSS file in your HTML:

  <link href="static/css/smatchittailwind.css" rel="stylesheet">