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">
|
||
|
```
|
||
|
|