Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

# Install all official plugins
npm install -D @tailwindcss/typography
npm install -D @tailwindcss/forms
npm install -D @tailwindcss/container-queries

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/container-queries'),
  ],
};

<form class="space-y-4 max-w-md mx-auto p-6">
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
    <input type="text"
           class="form-input w-full rounded-lg border-gray-300
                  focus:border-blue-500 focus:ring-blue-500" />
  </div>
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Role</label>
    <select class="form-select w-full rounded-lg border-gray-300
                   focus:border-blue-500 focus:ring-blue-500">
      <option>Designer</option>
      <option>Developer</option>
    </select>
  </div>
  <div class="flex items-center gap-2">
    <input type="checkbox" id="terms"
           class="form-checkbox h-4 w-4 text-blue-600 rounded border-gray-300" />
    <label for="terms" class="text-sm text-gray-700">Accept terms</label>
  </div>
</form>

<div class="@container">
  <div class="flex flex-col @md:flex-row gap-4 p-4">
    <div class="@md:w-1/3 bg-blue-50 p-4 rounded">Sidebar (responds to container)</div>
    <div class="@md:flex-1 bg-white p-4 rounded shadow">Main (responds to container)</div>
  </div>
</div>