This project contains the Tailwind CSS build setup for the SkyCMS website. It compiles Tailwind CSS into a ready-to-use CSS file and provides a self-hosted JavaScript runtime for dynamic styling.
- Custom Brand Styling - Pre-configured with SkyCMS brand colors, fonts, and animations
- Multiple Distribution Formats - Compiled CSS and JavaScript runtime options
- CDN Ready - Automatically published to jsDelivr for easy integration
- GitHub Actions - Automated builds on every push
- Production Optimized - Minified outputs for best performance
-
Install dependencies:
npm install
-
Build the CSS:
npm run build
The compiled CSS will be available at dist/tailwind.css and dist/tailwind.min.css.
npm run build- Build both regular and minified CSS files (createsdist/tailwind.cssanddist/tailwind.min.css)npm run watch- Watch for changes and rebuild automatically (for development)npm run build:minify- Build only the minified CSS for production (createsdist/tailwind.min.css)npm run build:skycms- Build self-hosted JavaScript runtime distribution (createsdist/skycms/)npm run build:all- Build everything: CSS and JavaScript runtime distributions
tailwind-skycms/
├── src/
│ └── input.css # Source CSS with Tailwind directives
├── dist/
│ ├── tailwind.css # Compiled CSS output
│ ├── tailwind.min.css # Minified CSS output
│ └── skycms/ # Self-hosted JavaScript runtime
│ ├── tailwind-bundle.js # Combined runtime + config
│ ├── tailwind-runtime.js # Tailwind engine only
│ └── tailwind-config.js # Configuration only
├── .gUsing in Your Projects
### Option 1: Via CDN (Easiest - Recommended)
Use jsDelivr to load files directly from this GitHub repository:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SkyCMS Website</title>
<!-- Option A: Use compiled CSS (faster, production-ready) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/YOUR-USERNAME/YOUR-REPO@main/dist/tailwind.min.css">
link rel="stylesheet" href="path/to/dist/tailwind.min.css">
<!-- Combined bundle (config + runtime) -->
<script src="path/to/dist/skycms/tailwind-bundle.js"></script>
<!-- OR separate files -->
<script src="path/to/dist/skycms/tailwind-config.js"></script>
<script src="path/to/dist/skycms/tailwind-runtime.js"></script
### Basic HTML Example
Include the compiled CSS file in your HTML `<head>` section:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SkyCMS Website</title>
<!-- Link to the compiled Tailwind CSS -->
<link rel="stylesheet" href="path/to/dist/tailwind.css">
</head>
<body>
<div class="container mx-auto px-4">
<h1 class="text-4xl font-bold text-blue-600 mt-8">
Welcome to SkyCMS
</h1>
<p class="text-gray-700 mt-4">
This page is styled with Tailwind CSS!
</p>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4">
Click Me
</button>
</div>
</body>
</html>Use the minified version for better performance:
<link rel="stylesheet" href="path/to/dist/tailwind.min.css">Depending on where your HTML file is located relative to this project:
-
Same directory as
dist/folder:<link rel="stylesheet" href="dist/tailwind.css">
-
In a
public/orwww/folder:<link rel="stylesheet" href="../tailwind-css/dist/tailwind.css">
-
Using absolute path (local development):
<link rel="stylesheet" href="/dist/tailwind.css">
This project is already configured with a custom Tailwind theme including:
- Custom brand colors (cyan/teal tones)
- Custom accent colors (orange/yellow palette)
- Custom gray scale
- Custom fonts (Montserrat, Roboto, Inter)
- Custom animations (float, cloud animations, fade/slide effects)
All customization is done in tailwind.config.js and built into your CSS files.
- Edit the configuration in
tailwind.config.js:
module.exports = {
theme: {
extend: {
colors: {
brand: {
500: "#00DEDE", // Your custom brand color
600: "#00ADB5",
},
// Add more custom colors...
},
fontFamily: {
montserrat: ["Montserrat", "sans-serif"],
// Add custom fonts...
},
animation: {
float: "float 6s ease-in-out infinite",
// Add custom animations...
},
keyframes: {
float: {
"0%, 100%": { transform: "translateY(0px)" },
"50%": { transform: "translateY(-20px)" },
},
// Define animation keyframes...
},
},
},
}-
Rebuild the CSS to apply your changes:
npm run build
-
Use your custom classes in HTML:
<!-- Custom brand colors --> <div class="bg-brand-500 text-accent-400">Brand styled content</div> <!-- Custom fonts --> <h1 class="font-montserrat">Heading with Montserrat</h1> <!-- Custom animations --> <div class="animate-float">Floating element</div> <div class="animate-slide-in-left">Slide in from left</div>
Brand Colors:
bg-brand-500,text-brand-600,border-brand-700
Accent Colors:
bg-accent-{25,50,100,200,300,400,500,600,700,800,900,950}
Custom Fonts:
font-montserrat,font-roboto,font-inter
Animations:
animate-float- Gentle up/down floatinganimate-pulse-slow- Slow pulsing effectanimate-cloud-float-1/2/3- Cloud-like floating patternsanimate-fade-in- Fade in effectanimate-slide-in-left/right/up/bottom- Slide in from different directions
Edit src/input.css to add custom styles:
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Your custom CSS here */
.custom-button {
@apply bg-blue-500 text-white px-4 py-2 rounded;
}After editing, run npm run build to compile your changes.
Update tailwind.config.js to scan your HTML/template files for Tailwind classes:
module.exports = {
content: [
"./src/**/*.{html,js,jsx,ts,tsx}",
"../skycms/**/*.html", // Add your SkyCMS template paths
"../public/**/*.html",
],
// ...
}This ensures Tailwind only includes the classes you actually use, keeping the file size small.
- CDN_USAGE.md - Complete guide to using files via jsDelivr CDN
- SKYCMS_BUILD_GUIDE.md - Detailed build process documentation
- CDN_VS_BUILD_PROCESS.md - Understanding runtime vs compiled approaches
- *🤖 Automated Builds
This project uses GitHub Actions to automatically:
- Build the distribution on every push to
main - Commit and push the built files back to the repository
- Make files instantly available via jsDelivr CDN
The workflow runs automatically - no manual intervention needed!
Issue: CSS file is very large
- Solution: Make sure the
contentpaths intailwind.config.jspoint to your actual template files. Tailwind will only include the classes you're actually using.
Issue: Styles not updating
- Solution: Use
npm run watchduring development, or rebuild withnpm run buildafter making changes.
Issue: Classes not working
- Solution: Verify the CSS file is properly linked in your HTML and that you've rebuilt after adding new classes.
Issue: CDN not showing latest changes
- Solution: Wait a few minutes for jsDelivr cache to update, or purge cache at https://www.jsdelivr.com/tools/purge
Issue: Custom colors/fonts not included in CSS
- Solution: Make sure you're using the classes in your HTML files. See CDN_VS_BUILD_PROCESS.md for details.
MIT
npm run watch-
Edit your HTML files and add Tailwind classes
-
The CSS will automatically rebuild when you save changes to
src/input.cssor any files matching thecontentpatterns intailwind.config.js
dist/tailwind.css- Full CSS file (use for development)dist/tailwind.min.css- Minified CSS file (use for production)
Issue: CSS file is very large
- Solution: Make sure the
contentpaths intailwind.config.jspoint to your actual template files. Tailwind will only include the classes you're actually using.
Issue: Styles not updating
- Solution: Use
npm run watchduring development, or rebuild withnpm run buildafter making changes.
Issue: Classes not working
- Solution: Verify the CSS file is properly linked in your HTML and that you've rebuilt after adding new classes.