Tailwind is a utility-based CSS framework to rapidly build modern websites without ever leaving your HTML. We prefer this framework and have integrated it into our Firecode platform.
Setup Instructions
Initial Configuration
Enable Tailwind version 2 in settings.json:
{
"tailwind": 2
}
After reloading, users can configure tailwind.config.js. The system compiles new CSS through cloud infrastructure, requiring up to 10 seconds per change.
Example Usage
<div class="bg-blue-100 h-24 flex items-center justify-center">
<h1 class="text-blue-400">Hello World</h1>
</div>
Production Optimization
For production readiness, developers must enable purge in tailwind.config.js:
module.exports = {
purge: {
enabled: true
},
// ... other config
}
> Note: Disable this setting during development for faster iteration.
External Resources