Goyal CSS Engine IntelliSenseAuto-completion and hover CSS previews for Goyal CSS Engine. Installation Launch VS Code Quick Open ( Ctrl+P), paste the following command, and press enter.Copied to clipboard |
⚡ Goyal CSS Engine
|
| Breakpoint | Minimum Width |
|---|---|
sm: |
640px |
md: |
768px |
lg: |
1024px |
xl: |
1280px |
Examples
sm:p-4
md:p-8
lg:p-[48px]
xl:p-12
You can combine responsive variants with arbitrary values:
md:w-[500px]
lg:grid-cols-[1fr_2fr]
xl:p-[64px]
🌙 Dark Mode
Use the dark: variant to define styles for dark mode.
dark:text-[white]
dark:bg-[#000000]
Example:
<div class="bg-white text-black dark:bg-[#000000] dark:text-[white]">
Dark Mode Supported
</div>
🔄 Transforms
Goyal CSS Engine supports 2D and 3D transform utilities.
Rotate
rotate-[45deg]
Scale
scale-[1.2]
Translate
translate-x-[20px]
translate-y-[10px]
Skew
skew-y-[10deg]
You can combine transformations:
rotate-[45deg] scale-[1.2] translate-x-[20px]
✨ Transitions
Create transition utilities using arbitrary values.
transition-[all]
duration-[300ms]
ease-[ease-in-out]
delay-[100ms]
Example:
<button
class="transition-[all] duration-[300ms] ease-[ease-in-out] hover:scale-[1.05]"
>
Hover Me
</button>
🎬 Animations
Goyal CSS Engine includes common animation utilities.
animate-spin
animate-bounce
animate-pulse
animate-ping
Example:
<div class="animate-spin">
Loading...
</div>
🧩 Framework Support
Goyal CSS Engine can scan multiple popular web-development file formats automatically.
| File Type | Supported |
|---|---|
| HTML | ✅ |
| JSX | ✅ |
| TSX | ✅ |
| Vue | ✅ |
| Svelte | ✅ |
| PHP | ✅ |
| JavaScript | ✅ |
| TypeScript | ✅ |
Example source pattern:
src/**/*.{html,jsx,tsx,vue,svelte,php,js,ts}
⚙️ Programmatic Node.js API
You can integrate Goyal CSS Engine directly into your own Node.js scripts.
One-Time Build
import { buildFramework } from '@goyalsoft/goyal-css-engine';
await buildFramework(
'src/**/*.{html,jsx,tsx}',
'dist/output.min.css',
{
minify: true
}
);
Watch Mode
import { watchFramework } from '@goyalsoft/goyal-css-engine';
watchFramework(
'src/**/*.{html,jsx,tsx}',
'dist/output.css',
{
minify: false
}
);
🏗️ Example Project Structure
A typical project can look like:
my-project/
├── src/
│ ├── index.html
│ ├── App.jsx
│ └── components/
│ └── Header.jsx
│
├── dist/
│ └── output.css
│
├── package.json
└── node_modules/
Run:
npx goyal-css "src/**/*.{html,jsx,tsx}" dist/output.css
Then include the generated stylesheet in your application:
<link rel="stylesheet" href="./dist/output.css" />
⚡ Why Goyal CSS Engine?
Traditional utility CSS frameworks often require configuration, plugins, presets, or large build pipelines.
Goyal CSS Engine is designed around a simpler idea:
Write the CSS utility you need. Let the engine generate it.
No configuration files required
No config
No plugins
No presets
Arbitrary CSS values
bg-[#0f172a]
text-[oklch(0.8_0.15_200)]
w-[350px]
clip-path-[polygon(...)]
Lightweight architecture
Source Files
│
▼
Goyal CSS Scanner
│
▼
Utility Parser
│
▼
CSS Generator
│
▼
output.css
🪶 Production Builds
For production deployments, use the --minify option:
npx goyal-css "src/**/*.{html,jsx,tsx,vue,svelte}" dist/output.min.css --minify
This generates a smaller stylesheet by removing unnecessary whitespace and comments.
📜 License
MIT © Goyal Soft
👨💻 Goyal Soft
Goyal CSS Engine is developed and maintained by Goyal Soft.
Built for developers who want a simple, flexible, and universal utility CSS engine.
⭐ Support the Project
If Goyal CSS Engine is useful to you:
- ⭐ Star the project on GitHub
- 📦 Install it from npm
- 🐛 Report bugs
- 💡 Suggest improvements
- 🤝 Contribute to the project
Goyal CSS Engine — Write CSS utilities. Skip the configuration.