GEMINITailwind CSS v4 Gemini System Prompt
Generate Google AI Studio and Gemini SDK system instructions for Tailwind CSS v4. Google AI Studio and Gemini SDK system instructions steer Gemini models with explicit Tailwind CSS v4 roles, input constraints, and output formats, maximizing reasoning reliability and code fidelity.
prompts/gemini-system-instructions.jsonWhat this file changes for Tailwind CSS v4
Google AI Studio and Gemini SDK system instructions steer Gemini models with explicit Tailwind CSS v4 roles, input constraints, and output formats, maximizing reasoning reliability and code fidelity.
Tailwind CSS v4: code to avoid and code to write instead
// Discouraged in v4: Obsolete tailwind.config.js
module.exports = {
theme: {
extend: { colors: { brand: "#f97316" } }
}
};@import "tailwindcss";
@theme {
--color-brand-primary: #f97316;
--font-display: "Geist Sans", sans-serif;
}How to Install Tailwind CSS v4 Gemini System Instructions via Terminal
Step 1: Open Project Directory & Verify Target Placement
Open your terminal and navigate to your project root folder where the prompts/gemini-system-instructions.json file will reside. Ensure the file is placed at the exact path below relative to your project root so the AI engine automatically loads it:
Step 2: Fetch Rule File via Terminal Command
Run curl, PowerShell, or wget to stream the rule directly from the DevScratchpad raw API endpoint and write it to prompts/gemini-system-instructions.json:
Terminal One-Liner Install
Run directly in your project root to stream and write this rule file with one command.
mkdir -p "prompts" && curl -fsSL "https://www.devscratchpad.tech/api/raw/gemini-prompts/tailwind-v4" -o "prompts/gemini-system-instructions.json"Step 3: Check that Gemini API and Google AI Studio uses it
Nothing loads this file automatically. Pass it as the system instruction in your Gemini API call, or paste it into Google AI Studio.
Gemini system instructions generator for the Gemini API
Gemini System Instructions: how it works, where the file goes, and every Gemini preset.
Tools for Tailwind CSS v4 work
Browser-based utilities to test, format and inspect the code your AI tool writes. Nothing you paste is uploaded.
JSON to TypeScript Interfaces
Instantly infer TypeScript interfaces from a JSON payload.
JSON to Zod Schema
Infer Zod validation schemas directly from JSON payloads.
SVG to JSX Converter
Convert raw SVG markup into a React JSX component.
JWT Decoder & Inspector
Decode JSON Web Tokens locally. Inspect header and claims, and verify HS256 signatures with your secret.
Live Repository & Schema Ingestion
Inspect any public or private GitHub repository, or paste SQL DDL and Prisma models directly in AI Skill Studio to auto-generate authentic rules. Zero server transmission.
Migrating from Legacy .cursorrules or CLAUDE.md?
Use the free, in-browser converter to turn one long rules file into Cursor .mdc, Claude SKILL.md or Windsurf rules.
Technical FAQ: Tailwind CSS v4 AI Rulebooks
How do I use this prompt in Google AI Studio?
Paste the text parts into the System instructions field in Google AI Studio, or load the JSON in code and pass it as the system instruction (system_instruction in REST, config.systemInstruction in the Google Gen AI SDK).
Which Gemini models support these instructions?
Current Gemini models in the Gemini API and Google AI Studio accept a system instruction. Check Google's model list for the one you use.