Tailwind CSS Snippets for VS Code

A comprehensive collection of Tailwind CSS snippets for Visual Studio Code, supporting HTML, React, Vue, JavaScript, and TypeScript.

⚠️ Disclaimer ⚠️

This extension is not the official Tailwind CSS extension. It is a community-created tool designed to enhance your development experience.

Features

🎨 Comprehensive Snippets: Covers all major Tailwind CSS features
🔄 Multiple Framework Support: HTML, React, Vue, JavaScript, and TypeScript
🎯 Type Safety: Full TypeScript support with proper types and interfaces
🎮 Interactive Components: Ready-to-use hooks and utilities
📱 Responsive Design: Built-in responsive utilities and hooks
🌓 Dark Mode: Dark mode support with theme toggle
🎭 Animations: Smooth transitions and animations
📝 Form Handling: Form utilities with validation
🎪 UI Components: Pre-styled components (buttons, cards, modals, etc.)

Installation

Open VS Code
Go to Extensions (Ctrl+Shift+X)
Search for "Tailwind CSS Snippets"
Click Install

Usage

HTML Snippets

Prefix	Description
`tw-container`	Container with responsive padding
`tw-btn`	Button with variants
`tw-card`	Card component
`tw-input`	Input with label
`tw-alert`	Alert component
`tw-modal`	Modal dialog
`tw-table`	Responsive table

React Snippets

Prefix	Description
`twr-container`	React container component
`twr-btn`	React button component
`twr-card`	React card component
`twr-input`	React input component
`twr-alert`	React alert component
`twr-modal`	React modal component
`twr-table`	React table component

Vue Snippets

Prefix	Description
`twv-container`	Vue container component
`twv-btn`	Vue button component
`twv-card`	Vue card component
`twv-input`	Vue input component
`twv-alert`	Vue alert component
`twv-modal`	Vue modal component
`twv-table`	Vue table component

JavaScript Hooks

Prefix	Description
`twj-class`	Class name utility
`twj-responsive`	Responsive design hook
`twj-theme`	Theme toggle hook
`twj-animate`	Animation hook
`twj-form`	Form handling hook
`twj-modal`	Modal management hook
`twj-toast`	Toast notification hook
`twj-tabs`	Tab management hook
`twj-dropdown`	Dropdown management hook

TypeScript Hooks

Prefix	Description
`twt-class`	Type-safe class name utility
`twt-responsive`	Type-safe responsive hook
`twt-theme`	Type-safe theme hook
`twt-animate`	Type-safe animation hook
`twt-form`	Type-safe form hook
`twt-modal`	Type-safe modal hook
`twt-toast`	Type-safe toast hook
`twt-tabs`	Type-safe tabs hook
`twt-dropdown`	Type-safe dropdown hook

Examples

React Component with TypeScript

import { useForm } from './hooks/useForm';

interface LoginForm {
  email: string;
  password: string;
}

const LoginComponent = () => {
  const { values, handleChange, handleBlur, getFieldClassName } = useForm<LoginForm>({
    email: '',
    password: ''
  });

  return (
    <form className="space-y-4">
      <input
        type="email"
        name="email"
        value={values.email}
        onChange={handleChange}
        onBlur={handleBlur}
        className={getFieldClassName('email')}
      />
      <input
        type="password"
        name="password"
        value={values.password}
        onChange={handleChange}
        onBlur={handleBlur}
        className={getFieldClassName('password')}
      />
    </form>
  );
};

Vue Component

<template>
  <div class="container mx-auto p-4">
    <button
      class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded"
      @click="toggleTheme"
    >
      Toggle Theme
    </button>
  </div>
</template>

<script setup>
import { useTheme } from './composables/useTheme';

const { theme, toggleTheme } = useTheme();
</script>

Contributing

We welcome your feedback and suggestions to improve these snippets.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Changelog

See CHANGELOG.md for a list of changes.

Support

If you find this extension helpful, please consider:

Sharing the extension
Giving appropriate rating of extension on marketplace
Reporting bugs
Suggesting new features

Tailwind CSS Snippets SP

SMIT_PATEL_SP