Getting Started
TailwindScript combines the power of Tailwind CSS with modern JavaScript patterns. Start building responsive UIs in minutes with zero configuration.
Installation
// Add to your HTML
<script src="/tailwindScript.js"></script>
<script src="/tailwindcss.js"></script>
Include the TailwindScript and Tailwind CSS files in your HTML to start using classes and JavaScript APIs.
Core Concepts
1. Utility-First Styling
Apply classes directly to HTML elements. TailwindScript automatically optimizes styles.
<div class="bg-blue-600 text-white p-4 rounded">
My first TailwindScript component!
</div>
2. Dynamic Styling
Use JavaScript to apply styles conditionally. No framework needed.
style(document.getElementById('theme-toggle').checked ?
'bg-purple-600' : 'bg-pink-600')
Advanced Techniques
Theming
createTheme({
colors: {
primary: '#6EE7B7',
secondary: '#CBD5E1'
}
})
Create reusable themes that cascade across your components. Auto-applies to all related elements.