CSS Processors

// Variables
$primary-color: #3b82f6;
$secondary-color: #8b5cf6;
$spacing: 1rem;

// Nesting
.card {
  padding: $spacing;
  background: white;
  border-radius: 0.5rem;
  
  &:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .card-header {
    color: $primary-color;
    font-weight: bold;
    margin-bottom: $spacing;
  }
  
  .card-body {
    color: #333;
  }
}

// Mixins
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin responsive($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 768px) { @content; }
  } @else if $breakpoint == tablet {
    @media (max-width: 1024px) { @content; }
  }
}

.container {
  @include flex-center;
  
  @include responsive(mobile) {
    flex-direction: column;
  }
}

// Functions
@function calculate-spacing($multiplier) {
  @return $spacing * $multiplier;
}

.large-padding {
  padding: calculate-spacing(2);
}

// Extend/Inheritance
%button-base {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}

.primary-button {
  @extend %button-base;
  background: $primary-color;
  color: white;
}

.secondary-button {
  @extend %button-base;
  background: $secondary-color;
  color: white;
}

// Partials and imports
// @import 'variables';
// @import 'mixins';

// Loops
@for $i from 1 through 5 {
  .mt-#{$i} {
    margin-top: #{$i * 0.25}rem;
  }
}

// Each
$colors: (primary: $primary-color, secondary: $secondary-color);

@each $name, $color in $colors {
  .text-#{$name} {
    color: $color;
  }
}

// Variables
@primary: #3b82f6;
@secondary: #8b5cf6;
@spacing: 1rem;

// Nesting
.card {
  padding: @spacing;
  background: white;
  
  &:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .title {
    color: @primary;
    font-weight: bold;
  }
}

// Mixins
.flex-center() {
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-style(@bg-color) {
  background: @bg-color;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
}

.container {
  .flex-center();
}

.primary-button {
  .button-style(@primary);
}

// Operations
.sidebar {
  width: @spacing * 20;
  padding: @spacing / 2;
}

// Functions
.header {
  background: lighten(@primary, 10%);
  border-bottom: 2px solid darken(@primary, 20%);
}

// Guards (conditional mixins)
.mixin(@a) when (@a > 10) {
  font-size: 20px;
}

.mixin(@a) when (@a <= 10) {
  font-size: 14px;
}

// Loops
.loop(@counter) when (@counter > 0) {
  .mt-@{counter} {
    margin-top: (@counter * 0.25rem);
  }
  .loop((@counter - 1));
}

.loop(5);

// Variables (no $ or @ needed)
primary = #3b82f6
secondary = #8b5cf6
spacing = 1rem

// Nesting (no braces or semicolons needed)
.card
  padding spacing
  background white
  border-radius 0.5rem
  
  &:hover
    box-shadow 0 4px 6px rgba(0, 0, 0, 0.1)
  
  .title
    color primary
    font-weight bold

// Mixins
flex-center()
  display flex
  align-items center
  justify-content center

button-style(bg-color)
  background bg-color
  color white
  padding 0.5rem 1rem
  border none
  border-radius 0.25rem

.container
  flex-center()

.primary-button
  button-style(primary)

// Conditionals
box(x, y, color = red)
  if color == red
    border 1px solid red
  else
    border 1px solid color

// Loops
for num in 1..5
  .mt-{num}
    margin-top (num * 0.25)rem

// Functions
add(a, b)
  a + b

.sidebar
  width add(100px, 50px)

/* Your CSS file */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600;
  }
}

@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }
}

<!-- HTML with Tailwind classes -->
<div class="container mx-auto px-4">
  <h1 class="text-4xl font-bold text-blue-600 mb-4">
    Welcome to Tailwind
  </h1>
  
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    <div class="bg-white p-6 rounded-lg shadow-md">
      <h2 class="text-xl font-semibold mb-2">Card 1</h2>
      <p class="text-gray-600">Content here</p>
    </div>
    
    <div class="bg-white p-6 rounded-lg shadow-md">
      <h2 class="text-xl font-semibold mb-2">Card 2</h2>
      <p class="text-gray-600">Content here</p>
    </div>
    
    <div class="bg-white p-6 rounded-lg shadow-md">
      <h2 class="text-xl font-semibold mb-2">Card 3</h2>
      <p class="text-gray-600">Content here</p>
    </div>
  </div>
  
  <button class="btn-primary mt-4">
    Click me
  </button>
</div>

{
  "processors": ["tailwindcss"],
  "customSettings": {
    "tailwindcss": {
      "theme": {
        "extend": {
          "colors": {
            "brand": "#3b82f6"
          }
        }
      }
    }
  }
}

<!-- UnoCSS uses similar utility classes to Tailwind -->
<div class="flex items-center justify-center min-h-screen">
  <div class="p-8 bg-white rounded-lg shadow-xl">
    <h1 class="text-3xl font-bold text-blue-500 mb-4">
      UnoCSS Example
    </h1>
    
    <p class="text-gray-700 mb-4">
      Instant on-demand atomic CSS
    </p>
    
    <button class="px-6 py-3 bg-purple-500 text-white rounded hover:bg-purple-600 transition">
      Get Started
    </button>
  </div>
</div>

{
  "processors": ["unocss"],
  "customSettings": {
    "unocss": {
      "presets": ["uno", "attributify", "icons"],
      "theme": {
        "colors": {
          "brand": "#8b5cf6"
        }
      }
    }
  }
}

/* Modern CSS features via PostCSS plugins */

/* Nesting (via postcss-nesting) */
.card {
  background: white;
  
  & .title {
    color: blue;
  }
  
  &:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
}

/* Custom properties */
:root {
  --primary: #3b82f6;
  --spacing: 1rem;
}

.button {
  background: var(--primary);
  padding: var(--spacing);
}

/* Autoprefixer automatically adds vendor prefixes */
.flex-container {
  display: flex;
  justify-content: center;
}

{
  "processors": ["postcss"],
  "customSettings": {
    "postcss": {
      "plugins": [
        "autoprefixer",
        "postcss-nesting",
        "postcss-custom-properties"
      ]
    }
  }
}

{
  "processors": ["tailwindcss"],
  "customSettings": {
    "tailwindcss": {
      "theme": {
        "extend": {
          "colors": {
            "brand": "#3b82f6"
          }
        }
      }
    }
  }
}