Styler

Tool to generate CSS classes, a bit like tailwind but less strict.

Install

If you have Go installed, you can install styler with:

go install github.com/devOpifex/styler@latest

Otherwise, you can download the binary from the releases page.

Setup

Create a .styler file in your project root.

styler -create

Usage

First, edit .styler config file, then add a class attribute to your HTML elements.

ui <- fluidPage(
  div(
    class = "display-flex padding-2 margin-bottom-2 width-40",
    div(
      class = "flex-grow-1",
      h1("Hello, world!", class = "color-red-400 hover:color-cyan-500")
    ),
    div(
      class = "flex-shrink-1 md@display-none",
      h2("This is hidden on medium and larger screens", class = "color-blue hover:color-green")
    )
  )
)

Call styler to generate the CSS.

styler

Configuration

Styler can be customized through the .styler configuration file. You can create a default configuration with:

styler -create

The configuration allows you to customize:

• Output: File path where generated CSS is saved
• Input: File patterns to search for class attributes (e.g., **/*.html, *.js)
• Unit: CSS unit to use for numeric values (default: rem)
• Divider: Number to divide numeric values by (default: 4)
• Media Queries: Custom breakpoint definitions
• Colors: Custom color palette definitions

Default Configuration

{
    "version": "0.0.3",
    "pattern": "*.R|*.r|*.js|*.html",
    "directory": ".",
    "output": "style.min.css",
    "unit": "rem",
    "divider": 4,
    "media": [
        {
            "maxWidth": "",
            "minWidth": "640px",
            "name": "sm"
        },
        {
            "maxWidth": "",
            "minWidth": "768px",
            "name": "md"
        },
        {
            "maxWidth": "",
            "minWidth": "1024px",
            "name": "lg"
        },
        {
            "maxWidth": "",
            "minWidth": "1280px",
            "name": "xl"
        }
    ],
    "colors": {
        "amber": {
            "100": "#fef3c7",
            "200": "#fde68a",
            "300": "#fcd34d",
            "400": "#fbbf24",
            "50": "#fffbeb",
            "500": "#f59e0b",
            "600": "#d97706",
            "700": "#b45309",
            "800": "#92400e",
            "900": "#78350f",
            "950": "#451a03"
        },
        "blue": {
            "100": "#dbeafe",
            "200": "#bfdbfe",
            "300": "#93c5fd",
            "400": "#60a5fa",
            "50": "#eff6ff",
            "500": "#3b82f6",
            "600": "#2563eb",
            "700": "#1d4ed8",
            "800": "#1e40af",
            "900": "#1e3a8a",
            "950": "#172554"
        },
        "cyan": {
            "100": "#cffafe",
            "200": "#a5f3fc",
            "300": "#67e8f9",
            "400": "#22d3ee",
            "50": "#ecfeff",
            "500": "#06b6d4",
            "600": "#0891b2",
            "700": "#0e7490",
            "800": "#155e75",
            "900": "#164e63",
            "950": "#083344"
        },
        "emerald": {
            "100": "#d1fae5",
            "200": "#a7f3d0",
            "300": "#6ee7b7",
            "400": "#34d399",
            "50": "#ecfdf5",
            "500": "#10b981",
            "600": "#059669",
            "700": "#047857",
            "800": "#065f46",
            "900": "#064e3b",
            "950": "#022c22"
        },
        "fuchsia": {
            "100": "#fae8ff",
            "200": "#f5d0fe",
            "300": "#f0abfc",
            "400": "#e879f9",
            "50": "#fdf4ff",
            "500": "#d946ef",
            "600": "#c026d3",
            "700": "#a21caf",
            "800": "#86198f",
            "900": "#701a75",
            "950": "#4a044e"
        },
        "gray": {
            "100": "#f3f4f6",
            "200": "#e5e7eb",
            "300": "#d1d5db",
            "400": "#9ca3af",
            "50": "#f9fafb",
            "500": "#6b7280",
            "600": "#4b5563",
            "700": "#374151",
            "800": "#1f2937",
            "900": "#111827",
            "950": "#030712"
        },
        "green": {
            "100": "#dcfce7",
            "200": "#bbf7d0",
            "300": "#86efac",
            "400": "#4ade80",
            "50": "#f0fdf4",
            "500": "#22c55e",
            "600": "#16a34a",
            "700": "#15803d",
            "800": "#166534",
            "900": "#14532d",
            "950": "#052e16"
        },
        "indigo": {
            "100": "#e0e7ff",
            "200": "#c7d2fe",
            "300": "#a5b4fc",
            "400": "#818cf8",
            "50": "#eef2ff",
            "500": "#6366f1",
            "600": "#4f46e5",
            "700": "#4338ca",
            "800": "#3730a3",
            "900": "#312e81",
            "950": "#1e1b4b"
        },
        "lime": {
            "100": "#ecfccb",
            "200": "#d9f99d",
            "300": "#bef264",
            "400": "#a3e635",
            "50": "#f7fee7",
            "500": "#84cc16",
            "600": "#65a30d",
            "700": "#4d7c0f",
            "800": "#3f6212",
            "900": "#365314",
            "950": "#1a2e05"
        },
        "neutral": {
            "100": "#f5f5f5",
            "200": "#e5e5e5",
            "300": "#d4d4d4",
            "400": "#a3a3a3",
            "50": "#fafafa",
            "500": "#737373",
            "600": "#525252",
            "700": "#404040",
            "800": "#262626",
            "900": "#171717",
            "950": "#0a0a0a"
        },
        "orange": {
            "100": "#ffedd5",
            "200": "#fed7aa",
            "300": "#fdba74",
            "400": "#fb923c",
            "50": "#fff7ed",
            "500": "#f97316",
            "600": "#ea580c",
            "700": "#c2410c",
            "800": "#9a3412",
            "900": "#7c2d12",
            "950": "#431407"
        },
        "pink": {
            "100": "#fce7f3",
            "200": "#fbcfe8",
            "300": "#f9a8d4",
            "400": "#f472b6",
            "50": "#fdf2f8",
            "500": "#ec4899",
            "600": "#db2777",
            "700": "#be185d",
            "800": "#9d174d",
            "900": "#831843",
            "950": "#500724"
        },
        "purple": {
            "100": "#f3e8ff",
            "200": "#e9d5ff",
            "300": "#d8b4fe",
            "400": "#c084fc",
            "50": "#faf5ff",
            "500": "#a855f7",
            "600": "#9333ea",
            "700": "#7e22ce",
            "800": "#6b21a8",
            "900": "#581c87",
            "950": "#3b0764"
        },
        "red": {
            "100": "#fee2e2",
            "200": "#fecaca",
            "300": "#fca5a5",
            "400": "#f87171",
            "50": "#fef2f2",
            "500": "#ef4444",
            "600": "#dc2626",
            "700": "#b91c1c",
            "800": "#991b1b",
            "900": "#7f1d1d",
            "950": "#450a0a"
        },
        "rose": {
            "100": "#ffe4e6",
            "200": "#fecdd3",
            "300": "#fda4af",
            "400": "#fb7185",
            "50": "#fff1f2",
            "500": "#f43f5e",
            "600": "#e11d48",
            "700": "#be123c",
            "800": "#9f1239",
            "900": "#881337",
            "950": "#4c0519"
        },
        "sky": {
            "100": "#e0f2fe",
            "200": "#bae6fd",
            "300": "#7dd3fc",
            "400": "#38bdf8",
            "50": "#f0f9ff",
            "500": "#0ea5e9",
            "600": "#0284c7",
            "700": "#0369a1",
            "800": "#075985",
            "900": "#0c4a6e",
            "950": "#082f49"
        },
        "slate": {
            "100": "#f1f5f9",
            "200": "#e2e8f0",
            "300": "#cbd5e1",
            "400": "#94a3b8",
            "50": "#f8fafc",
            "500": "#64748b",
            "600": "#475569",
            "700": "#334155",
            "800": "#1e293b",
            "900": "#0f172a",
            "950": "#020617"
        },
        "stone": {
            "100": "#f5f5f4",
            "200": "#e7e5e4",
            "300": "#d6d3d1",
            "400": "#a8a29e",
            "50": "#fafaf9",
            "500": "#78716c",
            "600": "#57534e",
            "700": "#44403c",
            "800": "#292524",
            "900": "#1c1917",
            "950": "#0c0a09"
        },
        "teal": {
            "100": "#ccfbf1",
            "200": "#99f6e4",
            "300": "#5eead4",
            "400": "#2dd4bf",
            "50": "#f0fdfa",
            "500": "#14b8a6",
            "600": "#0d9488",
            "700": "#0f766e",
            "800": "#115e59",
            "900": "#134e4a",
            "950": "#042f2e"
        },
        "violet": {
            "100": "#ede9fe",
            "200": "#ddd6fe",
            "300": "#c4b5fd",
            "400": "#a78bfa",
            "50": "#f5f3ff",
            "500": "#8b5cf6",
            "600": "#7c3aed",
            "700": "#6d28d9",
            "800": "#5b21b6",
            "900": "#4c1d95",
            "950": "#2e1065"
        },
        "yellow": {
            "100": "#fef9c3",
            "200": "#fef08a",
            "300": "#fde047",
            "400": "#facc15",
            "50": "#fefce8",
            "500": "#eab308",
            "600": "#ca8a04",
            "700": "#a16207",
            "800": "#854d0e",
            "900": "#713f12",
            "950": "#422006"
        },
        "zinc": {
            "100": "#f4f4f5",
            "200": "#e4e4e7",
            "300": "#d4d4d8",
            "400": "#a1a1aa",
            "50": "#fafafa",
            "500": "#71717a",
            "600": "#52525b",
            "700": "#3f3f46",
            "800": "#27272a",
            "900": "#18181b",
            "950": "#09090b"
        }
    }
}

Property Values

• Media queries are suffixed with @ e.g.: md@, lg@
• States are suffixed with :, e.g.: hover:, active:
• Numeric values are set as unit specified in the config (defaults to rem) and are divided by the divider specified in the config (defaults to 4), e.g.: padding-top-2 will result in padding-top: 0.5rem
• Numerics precded by ~ are treated as strict and are not divided or suffixed with unit e.g.: flex~1 results in flex: 1
• Media queries can be edited in .styler config file
• Colors can be edited in .styler config file
• Extracted CSS properties are checked against the W3C CSS Properties table
• Multiple Value Parts: Create properties with multiple values like box-shadow-1-2-4-red which becomes box-shadow: 0.25rem 0.5rem 1rem red
• Selective Strict Values: Use ~ to mark specific parts as "strict" (no division or unit):
  • border-1-solid-red → border: 0.25rem solid red (number is divided by 4, unit added)
  • border-~1-solid-red → border: 1 solid red (strict number, no division or unit)
  • border-1~solid-red → border: 0.25rem solid red (only affects the part with ~)
  • box-shadow~1-2-2-grey → box-shadow: 1 0.5rem 0.5rem grey (strict property name)