Frontend Workflows in PhpStorm: Tailwind, Alpine.js, Vue & React

1. Why PhpStorm for modern frontend stacks?

PhpStorm is often perceived purely as a PHP IDE. In reality it's built on the same IntelliJ core as WebStorm and offers the same JavaScript, TypeScript, CSS and HTML support. For teams developing a PHP backend and a modern frontend stack together, consolidating on a single IDE is more productive than running PhpStorm and VS Code side by side. Autocomplete, refactoring, Git integration and debugging are available for both worlds at once.

The decisive advantage lies in the IDE's deep project knowledge: PhpStorm understands the relationship between PHP templates that render Tailwind classes, the Alpine.js components living inside the markup, and the API endpoints the JavaScript code calls. No switching to a separate editor window, no mental context loss. The following sections show how this advantage is unlocked through concrete configuration steps.

2. Tailwind CSS: class completion and IntelliSense

Tailwind CSS v3 and v4 are only partially usable in PhpStorm without additional configuration, because the IDE doesn't know the generated utility classes. The decisive step is installing the official Tailwind CSS IntelliSense plugin through the PhpStorm Plugin Marketplace. After installation, the tailwind.config.js file, or for Tailwind v4 the CSS configuration file, needs to be recognized as the project root. PhpStorm then reads all content paths from the configuration and builds a dynamic class list.

For Tailwind CSS v4 with CSS-first configuration (no JavaScript config file anymore), PhpStorm reads the @theme directive directly from the CSS source file. Completion works equally well in HTML attributes, PHP strings, JSX classes and Blade templates. For PHP files where classes are assembled dynamically through string concatenation, the @lang('class') pattern helps, or explicit annotation with a docblock comment so PhpStorm interprets the string as a Tailwind class list.

<?php
// Correctly annotate Tailwind classes in PHP templates
// PhpStorm reads the @tw hint and enables class completion

/** @var string $baseClasses Tailwind base classes for button component */
$baseClasses = 'inline-flex items-center justify-center gap-2 rounded-xl font-semibold transition-colors';

// Dynamic classes through complete strings, no concatenation of partial classes
// CORRECT: complete classes in an array, PhpStorm can resolve every line
$variantClasses = [
    'primary'   => 'bg-fuchsia-600 text-white hover:bg-fuchsia-700 focus:ring-fuchsia-500',
    'secondary' => 'bg-slate-100 text-slate-800 hover:bg-slate-200 focus:ring-slate-400',
    'danger'    => 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
];

// WRONG: Tailwind classes through concatenation, purge removes classes it never sees
// $prefix = 'bg-'; $color = 'fuchsia'; $shade = '600';
// $class = $prefix . $color . '-' . $shade; // 'bg-fuchsia-600' will NOT make it into the build

An important note for Tailwind v4: the safelist and content configuration is dropped in favor of direct CSS scanning. PhpStorm v2024.3+ recognizes the new @import "tailwindcss" syntax and automatically activates the corresponding completion mode. For projects using Hyvä Themes and Tailwind v4, the web/tailwind/tailwind.css file and all *.phtml paths need to be inside the IDE's scan path.

3. Alpine.js: directive support and syntax highlighting

Alpine.js directives such as x-data, x-show, x-on:click or x-bind:class are initially unknown HTML attributes to PhpStorm. Without configuration they get flagged as errors or ignored, leading to distracting red underlines throughout the markup. The solution is a two-step approach: first install the Alpine.js plugin for PhpStorm (available in the Marketplace), second exclude the custom HTML attributes from error reporting in the IDE settings under Editor → Inspections → HTML → Unknown HTML Attribute using a pattern filter (x-*, @*, :).

For projects using Hyvä Themes, this integration is especially important since Alpine.js is the primary JavaScript framework there and appears in practically every template. Once the plugin is installed, PhpStorm offers autocomplete for all Alpine.js directives, documentation tooltips on hover, and jump-to-definition for custom components registered via Alpine.data('componentName', () => ({...})). The JavaScript expression inside x-data is evaluated as full JavaScript with IntelliSense.

<!-- Alpine.js Component in Hyvä phtml template -->
<!-- PhpStorm recognizes x-data as a JS expression and offers IntelliSense -->

<div x-data="productGallery()"
     x-init="init()"
     class="relative overflow-hidden rounded-2xl">

    <!-- x-show: PhpStorm understands the boolean expression -->
    <div x-show="isLoading"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         class="absolute inset-0 flex items-center justify-center bg-white/80">
        <svg class="animate-spin h-8 w-8 text-fuchsia-600" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
        </svg>
    </div>

    <!-- x-for: PhpStorm understands the template iterator scope -->
    <template x-for="(image, index) in images" :key="index">
        <img :src="image.url"
             :alt="image.alt"
             @click="selectImage(index)"
             :class="{ 'ring-2 ring-fuchsia-500': activeIndex === index }"
             class="w-full h-64 object-cover cursor-pointer rounded-xl transition-all">
    </template>
</div>

<?php
// Alpine component as PHP JSON for server-side initialization
$componentData = $block->escapeHtmlAttr(json_encode([
    'images'      => $product->getMediaGalleryImages()->toArray(),
    'activeIndex' => 0,
    'isLoading'   => false,
]));
?>
<div x-data="Object.assign(productGallery(), <?= $componentData ?>)">

4. Vue.js: SFC support and DevTools integration

Vue Single File Components (.vue files) are natively supported by PhpStorm, no additional plugins needed. The IDE understands the three-part structure with <template>, <script setup> and <style scoped>, offers autocomplete for Vue-specific directives (v-if, v-for, v-model) and knows the Composition API with ref, computed, watch and defineProps. TypeScript inside <script setup lang="ts"> is fully supported with type checking.

The Vue Language Tools (Volar) should be activated as an external LSP plugin to improve type checking between the template and script block. PhpStorm integrates with this language server and shows type errors directly in the template, for example when a prop is declared as number but a string literal is passed. The Vue DevTools can be launched via PhpStorm's JavaScript debugger integration in Chrome, without leaving the IDE.

5. React and JSX: TypeScript and Fast Refresh

React projects with TypeScript and JSX are fully supported by PhpStorm. The IDE understands JSX syntax in .tsx files, offers autocomplete for component props based on TypeScript interface definitions, and flags type violations directly in the JSX. The tsconfig.json is automatically recognized as the project configuration, path aliases (@/components/Button), strict type checking and target configuration are all picked up by the IDE's analysis.

For React Fast Refresh combined with Vite, it's enough to set up the Vite Dev Server as a Run Configuration in PhpStorm. PhpStorm opens the browser automatically when needed and connects the JavaScript debugger to the running instance. File changes are reflected instantly in the browser via HMR, without the debugger needing to be disconnected and reconnected. This enables genuine edit-and-inspect without switching tabs.

// React component with TypeScript in PhpStorm
// PhpStorm checks props, return type and event handlers

interface ProductCardProps {
  id: number;
  name: string;
  price: number;
  imageUrl?: string;
  onAddToCart: (id: number) => void;
}

// PhpStorm: autocomplete for all props, type errors directly in the JSX
const ProductCard: React.FC<ProductCardProps> = ({
  id,
  name,
  price,
  imageUrl = '/placeholder.jpg',
  onAddToCart,
}) => {
  const [isAdding, setIsAdding] = React.useState(false);

  const handleClick = async () => {
    setIsAdding(true);
    try {
      await onAddToCart(id);
    } finally {
      setIsAdding(false);
    }
  };

  return (
    <div className="group relative rounded-2xl overflow-hidden border border-slate-200 hover:border-fuchsia-300 transition-colors">
      <img src={imageUrl} alt={name} className="w-full h-48 object-cover" />
      <div className="p-4">
        <h3 className="font-semibold text-slate-800 mb-1">{name}</h3>
        <p className="text-fuchsia-700 font-bold mb-3">€ {price.toFixed(2)}</p>
        <button
          onClick={handleClick}
          disabled={isAdding}
          className="w-full bg-fuchsia-600 text-white rounded-xl py-2 font-semibold hover:bg-fuchsia-700 disabled:opacity-50 transition-colors"
        >
          {isAdding ? 'Adding...' : 'Add to cart'}
        </button>
      </div>
    </div>
  );
};

export default ProductCard;

6. Vite integration: run configurations and HMR

Vite as a build tool and dev server can be set up in PhpStorm as an npm/Node.js Run Configuration. Under Run → Edit Configurations → + → npm, the dev script from package.json is selected. PhpStorm starts the process, shows the output in the integrated Run panel, and automatically recognizes Vite's URL output (http://localhost:5173), offering it as a clickable link. Multiple npm processes can be managed simultaneously via Services, for example the Vite Dev Server and a separate TypeScript type checker.

For projects with multiple Vite configs (for example a separate admin panel and storefront), multiple Run Configurations with different --config flags can be created. A compound run configuration starts both at once. PhpStorm remembers which configurations were last active and automatically restarts them the next time the project opens, if the Activate tool window option is set.

// vite.config.ts, PhpStorm reads the configuration and uses it for path completion
// Enter path aliases in BOTH tsconfig.json AND vite.config.ts so both work

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      // PhpStorm understands these aliases after syncing with tsconfig.json
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@composables': path.resolve(__dirname, './src/composables'),
    },
  },
  server: {
    port: 5173,
    // Proxy configuration for the PHP backend in the same project
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
  build: {
    outDir: 'pub/static/frontend/Mironsoft/default/web/js',
    rollupOptions: {
      input: {
        main: './src/main.ts',
        checkout: './src/checkout.ts',
      },
    },
  },
});

7. JavaScript debugging directly in PhpStorm

PhpStorm's built-in JavaScript debugger connects directly to Chromium-based browsers via the Chrome DevTools Protocol. Under Run → Edit Configurations → + → JavaScript Debug, the dev server's URL is entered. PhpStorm opens the browser instance with remote debugging enabled and connects sourcemaps automatically. Breakpoints set in the editor work directly against minified bundle code, because Vite always generates sourcemaps in the development environment.

For Vue components, the debugger shows the reactive state (ref values, computed) in the Variables panel. Alpine.js components can be inspected via Alpine.$data(element) in the debugger console window. The conditional breakpoints feature is especially useful for tracking down issues in v-for loops or Alpine.js x-for templates: the breakpoint only triggers at a specific index, without having to click through every loop iteration.

8. Frontend tooling compared

Deciding which frontend framework is best supported in PhpStorm depends on the use case. The following overview shows the maturity of the integration for the most common combinations of framework, tooling and IDE feature.

A common misconception: VS Code with the Tailwind IntelliSense plugin offers comparable completion for Tailwind classes, but no deep PHP context analysis. PhpStorm, on the other hand, understands that a PHP variable in a template is used as a Tailwind class, and can extend completion across the entire project context, across language and framework boundaries. That's especially valuable in Hyvä projects with mixed PHP/Alpine.js code.

9. Summary

PhpStorm as a frontend IDE for modern stacks with Tailwind CSS, Alpine.js, Vue and React is not a stopgap solution but a fully-fledged option that gives teams with a PHP backend and a modern frontend stack the benefit of a single IDE. Tailwind class completion through the IntelliSense plugin, Alpine.js directive support, native Vue SFC support and complete React TypeScript tooling are all production ready and fully cover everyday needs.

The biggest lever lies in Vite integration: anyone who sets up the dev server as a Run Configuration in PhpStorm and connects the JavaScript debugger via Chrome DevTools Protocol eliminates the constant context switching between editor, terminal and browser. Breakpoints directly in source code, Hot Module Replacement without interrupting the debugger, and full sourcemap support make PhpStorm a productive choice for the entire development stack.

10. FAQ: Frontend Workflows in PhpStorm