Getting Started
Installation
Get started with Jade Garden.
Generate strings
Install
Install jade-garden:
npm install jade-garden
yarn add jade-garden
pnpm add jade-garden
bun add jade-garden
Setup
If you are using Tailwind CSS, enable autocompletion for jade-garden functions.
- Install "Tailwind CSS IntelliSense" for VSCode.
- Add the following to your
settings.json:
{
"tailwindCSS.classFunctions": ["cm", "cn", "cva", "cx", "sva"]
}
Add the following to your .zed/settings.json:
{
"lsp": {
"tailwindcss-language-server": {
"settings": {
"classFunctions": ["cm", "cn", "cva", "cx", "sva"]
}
}
}
}
- Install the extension.
- Add the following configuration:
require 'lspconfig'.tailwindcss.setup({
settings = {
tailwindCSS = {
classFunctions = { "cm", "cn", "cva", "cx", "sva" }
}
}
})
- Check the version. Available for WebStorm 2023.1 and later.
- Open the settings. Go to Languages and Frameworks | Style Sheets | Tailwind CSS.
- Add the following to your tailwind configuration
{
"classFunctions": ["cm", "cn", "cva", "cx", "sva"]
}
Generate CSS
Install
With Tailwind CSS, install jade-garden and unplugin-jade-garden:
npm install jade-garden
npm install -D unplugin-jade-garden
yarn add jade-garden
yarn add -D unplugin-jade-garden
pnpm add jade-garden
pnpm add -D unplugin-jade-garden
bun add jade-garden
bun add -D unplugin-jade-garden
Setup
Enable autocompletion for jade-garden functions that will be used with unplugin-jade-garden.
- Install "Tailwind CSS IntelliSense" for VSCode.
- Add the following to your
settings.json:
{
"tailwindCSS.classFunctions": [
"cm",
"cn",
"cva",
"cx",
"defineCVA",
"defineSVA",
"getClasses",
"prefixClasses",
"sva",
"traits"
]
}
Add the following to your .zed/settings.json:
{
"lsp": {
"tailwindcss-language-server": {
"settings": {
"classFunctions": [
"cm",
"cn",
"cx",
"defineCVA",
"defineSVA",
"getClasses",
"prefixClasses",
"traits"
]
}
}
}
}
- Install the extension.
- Add the following configuration:
require 'lspconfig'.tailwindcss.setup({
settings = {
tailwindCSS = {
classFunctions = {
"cm",
"cn",
"cx",
"defineCVA",
"defineSVA",
"getClasses",
"prefixClasses",
"traits"
}
}
}
})
- Check the version. Available for WebStorm 2023.1 and later.
- Open the settings. Go to Languages and Frameworks | Style Sheets | Tailwind CSS.
- Add the following to your tailwind configuration
{
"classFunctions": [
"cm",
"cn",
"cva",
"cx",
"defineCVA",
"defineSVA",
"getClasses",
"prefixClasses",
"sva",
"traits"
]
}
Build
Use the supported plugin for your project to generate CSS.
// vite.config.ts
import { cn } from "jade-garden";
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
import jadeGarden from "unplugin-jade-garden/vite";
export default defineConfig({
build: {
lib: {
entry: "./index.js"
}
},
plugins: [
jadeGarden({
styleConfigs: {},
entry: "./css/app.css",
}),
tailwindcss()
]
});
// rollup.config.js
import { cn } from "jade-garden";
import postcss from "rollup-plugin-postcss";
import jadeGarden from "unplugin-jade-garden/rollup";
export default {
input: "./index.js",
plugins: [
jadeGarden({
styleConfigs: {},
entry: "./css/app.css",
}),
postcss({
extract: true,
plugins: [require("@tailwindcss/postcss")]
})
]
};
// webpack.config.js
const path = require("node:path");
const { cn } = require("jade-garden");
const jadeGarden = require("unplugin-jade-garden/webpack");
export default {
entry: "./index.js",
plugins: [
jadeGarden({
styleConfigs: {},
entry: "./css/app.css",
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: ["@tailwindcss/postcss"]
}
}
}
]
}
]
}
};
// rspack.config.js
const path = require("node:path");
const { cn } = require("jade-garden");
const jadeGarden = require("unplugin-jade-garden/rspack");
export default {
entry: "./index.js",
plugins: [
jadeGarden({
styleConfigs: {},
entry: "./css/app.css",
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: ["@tailwindcss/postcss"]
}
}
}
]
}
]
}
};