64 lines
1.3 KiB
Markdown
64 lines
1.3 KiB
Markdown
# Smatchit Tailwind Project with DaisyUI
|
|
|
|
## Setup Instructions
|
|
|
|
1. **Create and Initialize Project:**
|
|
```bash
|
|
cd /your_workspace_path
|
|
mkdir smatchit_tailwind_project
|
|
cd smatchit_tailwind_project
|
|
yarn init -y
|
|
```
|
|
|
|
2. **Install Tailwind CSS and DaisyUI:**
|
|
```bash
|
|
yarn add tailwindcss daisyui
|
|
npx tailwindcss init
|
|
```
|
|
|
|
3. **Configure Tailwind CSS and DaisyUI:**
|
|
Edit `tailwind.config.js`:
|
|
```javascript
|
|
module.exports = {
|
|
content: [
|
|
"/smatchit/wwws/admin/*.html"
|
|
],
|
|
theme: {
|
|
extend: {},
|
|
},
|
|
plugins: [require('daisyui')],
|
|
}
|
|
```
|
|
|
|
4. **Create Tailwind CSS File:**
|
|
```bash
|
|
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`:
|
|
```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:
|
|
```bash
|
|
yarn build:css
|
|
```
|
|
|
|
## Usage
|
|
|
|
- Link the generated CSS file in your HTML:
|
|
```html
|
|
<link href="static/css/smatchittailwind.css" rel="stylesheet">
|
|
```
|
|
|