Server-side image generation using Tailwind CSS. With testing UI for viewing passed output using html and tailwind classes. You can use this to generate images for social media cards, thumbnails, or any dynamic images that leverage Tailwind's utility clas
npm install tailwind-server-image-generatorA powerful Node.js package for generating images server-side using Tailwind CSS. Perfect for creating social media cards, thumbnails, or any dynamic images that leverage Tailwind's utility classes.
- Server-side image generation using Tailwind CSS
- Express server included for HTTP API access
- Support for custom dimensions and formats
- Built-in error handling and automatic port selection
- Uses Puppeteer for accurate rendering
- Supports all Tailwind CSS utility classes
``bash`
npm install tailwind-image-generator
`javascript
const { generateImage, startServer } = require("tailwind-image-generator");
// Generate a single image
const htmlContent =
Generated with Tailwind CSS
;generateImage(htmlContent, "output.png", {
width: 600,
height: 400,
format: "png",
}).then(() => {
console.log("Image generated successfully!");
});
// Start the HTTP server
startServer();
`API Reference
$3
Generates an image from HTML content with Tailwind CSS styles.
#### Parameters:
-
(string): The HTML content to render
- outputPath (string): The path where the image will be saved
- options (object):
- width (number): Image width in pixels (default: 800)
- height (number): Image height in pixels (default: 600)
- format (string): Image format - 'png' (default)$3
Starts an Express server for HTTP-based image generation.
#### Parameters:
-
initialPort (number): Starting port number (default: 3000)
- maxAttempts (number): Maximum attempts to find an available port (default: 10)HTTP API Usage
Once the server is running, you can generate images via HTTP:
`bash
GET /generate?html=&width=800&height=600&format=png
`Example:
javascript
fetch(
"http://localhost:3000/generate?html=" +
encodeURIComponent('Hello')
)
.then((response) => response.blob())
.then((blob) => {
// Handle the generated image
});
`Requirements
- Node.js >= 18.17.0
- Tailwind CSS ^4.0.0
- Puppeteer ^24.1.1
Error Handling
The package includes robust error handling:
- Port conflicts are automatically resolved
- Invalid HTML content returns appropriate error messages
- File system errors are properly caught and reported
Best Practices
1. Always encode HTML content when using the HTTP API
2. Consider image dimensions based on your use case
3. Clean up generated images after use
4. Use appropriate error handling in production
Development
bash
Install dependencies
npm installRun tests
npm testStart server
node test.js
`References
- Tailwind CSS Documentation
- Puppeteer Documentation
- Express.js Documentation
License
ISC
AI Integration Example
Here's how an AI system could use this package to generate images:
javascript
async function generateSocialCard(content) {
// 1. Generate HTML with the content
const html = ${content.description}
; // 2. Make request to your image generator endpoint
const response = await fetch(
"http://your-server.com/generate?" +
new URLSearchParams({
html: encodeURIComponent(html),
width: 1200,
height: 630,
})
);
// 3. Get the image
const imageBuffer = await response.blob();
// 4. Use the image for your needs (e.g., save to disk, upload to storage, etc.)
return imageBuffer;
}
`This allows AI systems to:
- Generate social media cards
- Create dynamic banners/headers
- Generate preview images
- Create custom visualizations
Advanced Examples
$3
javascript
const { generateImage } = require("tailwind-image-generator");async function generateTwitterCard(title, description) {
const html =
${description}
; await generateImage(html, "twitter-card.png", {
width: 1200,
height: 630,
format: "png",
});
}
`$3
javascript
async function generateProductThumbnail(product) {
const html = ${product.price}
; await generateImage(html,
products/${product.id}.png, {
width: 800,
height: 800,
format: "png",
});
}
`$3
javascript
async function generateQuoteImage(quote, author) {
const html = "${quote}"
- ${author}
; await generateImage(html, "quote.png", {
width: 1080,
height: 1080,
format: "png",
});
}
``1. Email Marketing
- Generate dynamic header images
- Create personalized promotional banners
- Design campaign-specific graphics
2. E-commerce
- Automated product image generation
- Sale announcement banners
- Category thumbnails
- Price comparison cards
3. Content Management
- Blog post featured images
- Article preview cards
- Category headers
- Author profile cards
4. Social Media
- Twitter/LinkedIn/Facebook post images
- Instagram story templates
- YouTube thumbnails
- Pinterest pins
5. Documentation
- API endpoint cards
- Feature highlight images
- Tutorial step graphics
- Component previews
1. Performance Optimization
- Cache frequently generated images
- Use appropriate image dimensions
- Consider implementing rate limiting
- Clean up temporary files regularly
2. Error Handling
- Implement proper logging
- Set up monitoring for the service
- Handle timeout scenarios
- Validate input thoroughly
3. Security Considerations
- Sanitize HTML input
- Implement authentication if needed
- Set up CORS properly
- Monitor resource usage
4. Scaling Tips
- Use a CDN for high-traffic scenarios
- Implement queue systems for bulk processing
- Consider containerization
- Set up load balancing
Contributions are welcome! Please feel free to submit a Pull Request.