Itch Tailwind
A downloadable tool
Itch Tailwind
Local development environment for itch.io project pages, based on Vite and TailwindCSS
Develop locally
Live reloading development server
Build
Minify HTML and CSS
Deploy
by copy pasting
Features
Data driven templates
HTML templates using variables and loops, powered by posthtml-expressions
<div><span class="custom-token custom-tag"><span class="custom-token custom-tag"><span class="custom-token custom-punctuation"><</span>each</span> <span class="custom-token custom-attr-name">loop</span><span class="custom-token custom-attr-value"><span class="custom-token custom-punctuation custom-attr-equals">=</span><span class="custom-token custom-punctuation">"</span>review in reviews<span class="custom-token custom-punctuation">"</span></span><span class="custom-token custom-punctuation">></span></span>
<span class="custom-token custom-tag"><span class="custom-token custom-tag"><span class="custom-token custom-punctuation"><</span>h3</span><span class="custom-token custom-punctuation">></span></span>{{ review.title }}<span class="custom-token custom-tag"><span class="custom-token custom-tag"><span class="custom-token custom-punctuation"></</span>h3</span><span class="custom-token custom-punctuation">></span></span>
<span class="custom-token custom-tag"><span class="custom-token custom-tag"><span class="custom-token custom-punctuation"><</span>p</span><span class="custom-token custom-punctuation">></span></span>{{ review.content }}<span class="custom-token custom-tag"><span class="custom-token custom-tag"><span class="custom-token custom-punctuation"></</span>p</span><span class="custom-token custom-punctuation">></span></span>
<span class="custom-token custom-tag"><span class="custom-token custom-tag"><span class="custom-token custom-punctuation"></</span>each</span><span class="custom-token custom-punctuation">></span></span></div>
Make it your own
Customize your build however you'd like! All configuration is out in the open. Edit build settings, add or remove plugins and features.
Add any other tailwind component libraries, like daisyUI, RippleUI, TailBlocks etc.
Better living through post-processing
- Automatically prefix classes with
custom-in both HTML and CSS. - Add vendor prefixes for non-standard CSS features for better support.
- Minify HTML and CSS
Installation and Usage
Download and extract Itch Tailwind
Run npm install to install project dependencies
Download your current project templates with npm run fetch-templates https://yourname.itch.io/projectname
Start the development server with npm run start
When you're ready, build your new assets with npm run build
Copy your HTML to your itch project page, and your CSS to your page theme's CSS field.
You can use npm run copy-css and npm run copy-html to copy the contents of your built files to the clipboard
Download
Click download now to get access to the following files:
Comments
Log in with itch.io to leave a comment.