DEV Community: Aleksandr Ippatev

How Turborepo Builds Its Graph?

Aleksandr Ippatev — Wed, 03 Sep 2025 06:35:19 +0000

How Turborepo Builds Its Graph

Turborepo creates its dependency graph by analyzing the package.json files within your monorepo. It looks for two key things:

dependencies: What external npm packages and, crucially, what other local workspaces a package depends on.
devDependencies: Similar to dependencies, these also define relationships between workspaces.

When you run turbo run build --graph, Turborepo:

Discovers all workspaces.
For each workspace, it reads its package.json.
It draws a dependency edge from a package (e.g., web-app) to any other workspace listed in its dependencies or devDependencies (e.g., ui-components, utils).
It uses this graph to determine the correct order of execution and what can be cached.

Why Lazy (Dynamic) Imports Are Ignored

Lazy loading, typically done with syntax like import('./some-module') or await require('./other-module'), is a runtime concept.

Turborepo operates at the build/package level. It runs tasks (like build, test, lint) on entire packages. It doesn't analyze the source code inside those packages to see how modules are imported at runtime.
Dynamic imports are resolved by the application bundler (e.g., Webpack, Vite, Rollup) during the application's build process, not by Turborepo's task runner.
The dependency graph Turborepo builds is a task-level graph, not a source-code-level graph.

A Practical Example

Imagine this monorepo structure:

my-turborepo/
├── apps/
│   └── next-app/
│       ├── package.json
│       └── pages/
│           └── index.js
└── packages/
    ├── ui/
    │   ├── Button.jsx
    │   └── package.json
    └── utils/
        ├── helpers.js
        └── package.json

apps/next-app/package.json:

{
  "name": "next-app",
  "dependencies": {
    "ui": "workspace:*",
    "utils": "workspace:*"
  }
}

apps/next-app/pages/index.js:

// Static import - Turborepo knows about this via the package.json
import { Button } from 'ui';

// Dynamic import - Invisible to Turborepo's graph
const DynamicComponent = dynamic(() => import('../components/HeavyComponent'));

function HomePage() {
  return (
    <div>
      <Button>Click Me</Button>
      <DynamicComponent />
    </div>
  );
}

What Turborepo Sees:
The graph will show next-app -> depends on -> ui and utils. It will ensure the build tasks for ui and utils run before the build task for next-app.

What Turborepo Does NOT See:

The dynamic import of HeavyComponent.
Any other dynamic import within the source code.

Implications and Best Practices

Correct Caching: This behavior is correct and desired. If you change a dynamically imported module inside the next-app itself (like HeavyComponent.js), you don't want Turborepo to invalidate the cache for the entire ui or utils packages. You only want to rebuild next-app. Your application bundler (Next.js, Vite, etc.) handles the granular caching of those internal source files.
Defining Dependencies Correctly: The takeaway is that you must declare all package-level dependencies in your package.json files. If next-app uses a component from the ui package, even if it's dynamically imported, the ui package must be listed as a dependency. Turborepo relies solely on this declaration.

In summary: Turborepo's graph is built from package.json declarations, not from scanning source code for import statements. Lazy loading is a runtime concern handled by your bundler and is invisible to Turborepo's task scheduling and caching mechanism.

Migration Guide: Tailwind CSS v3 to v4

Aleksandr Ippatev — Sun, 24 Aug 2025 02:33:13 +0000

Migration Guide: Tailwind CSS v3 to v4 (CSS-First Configuration)

I'll provide you with a comprehensive migration guide and a working example that demonstrates Tailwind CSS v4's new CSS-first configuration approach.

Migration Steps Overview

Installation Changes: Update package.json to use Tailwind v4
Configuration Migration: Convert JS config to CSS-based config
Directive Changes: Update @tailwind to @import "tailwindcss"
Theme Configuration: Move theme from JS to CSS custom properties
Build Process: Adjust build commands for the new version

Here's a complete HTML example that demonstrates the new CSS-first approach:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS v4 Migration Guide</title>
    <script src="https://cdn.tailwindcss.com/v4-next"></script>
    <style type="text/css">
        /* New CSS-first configuration in Tailwind v4 */
        @import "tailwindcss";

        /* Custom theme configuration using CSS variables */
        @theme {
            --color-primary: #3b82f6;
            --color-secondary: #f97316;
            --color-accent: #8b5cf6;
            --font-family-sans: ui-sans-serif, system-ui, sans-serif;
            --font-family-display: ui-sans-serif, system-ui, sans-serif;
            --breakpoint-md: 48rem;
            --breakpoint-lg: 64rem;
            --spacing-1: 0.25rem;
            --spacing-2: 0.5rem;
            --spacing-3: 0.75rem;
            --spacing-4: 1rem;
            --spacing-5: 1.25rem;
            --spacing-6: 1.5rem;
            --spacing-8: 2rem;
            --spacing-10: 2.5rem;
            --spacing-12: 3rem;
            --spacing-16: 4rem;
            --spacing-20: 5rem;
            --spacing-24: 6rem;
        }

        /* Custom styles using the new theme variables */
        .btn-primary {
            background-color: var(--color-primary);
            color: white;
            padding: var(--spacing-3) var(--spacing-6);
            border-radius: 0.375rem;
            font-weight: 600;
            transition: background-color 0.2s;
        }

        .btn-primary:hover {
            background-color: color-mix(in srgb, var(--color-primary) 90%, black);
        }

        .card {
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
            padding: var(--spacing-6);
            background: white;
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
    <header class="bg-white shadow-sm">
        <div class="container mx-auto px-4 py-6">
            <h1 class="text-3xl font-bold text-gray-900">Tailwind CSS v4 Migration Guide</h1>
            <p class="text-lg text-gray-600 mt-2">CSS-First Configuration Example</p>
        </div>
    </header>

    <main class="container mx-auto px-4 py-12">
        <section class="mb-12">
            <h2 class="text-2xl font-semibold text-gray-800 mb-6">Key Changes in v4</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="card">
                    <h3 class="text-xl font-semibold text-primary mb-3">CSS-First Configuration</h3>
                    <p class="text-gray-700">Theme is now defined using CSS custom properties in a <code>@theme</code> block instead of a JavaScript configuration file.</p>
                </div>

                <div class="card">
                    <h3 class="text-xl font-semibold text-primary mb-3">New Directives</h3>
                    <p class="text-gray-700">The <code>@tailwind</code> directive is replaced with <code>@import "tailwindcss"</code> for base styles.</p>
                </div>

                <div class="card">
                    <h3 class="text-xl font-semibold text-primary mb-3">Performance Improvements</h3>
                    <p class="text-gray-700">v4 includes significant performance improvements with faster build times and smaller output CSS.</p>
                </div>
            </div>
        </section>

        <section class="mb-12">
            <h2 class="text-2xl font-semibold text-gray-800 mb-6">Migration Steps</h2>
            <div class="bg-gray-100 p-6 rounded-lg">
                <ol class="list-decimal list-inside space-y-3">
                    <li class="text-gray-700"><strong>Update package.json:</strong> Change Tailwind dependency to <code>"tailwindcss": "^4.0.0"</code></li>
                    <li class="text-gray-700"><strong>Replace configuration:</strong> Convert <code>tailwind.config.js</code> to CSS custom properties in your main CSS file</li>
                    <li class="text-gray-700"><strong>Update directives:</strong> Change <code>@tailwind base</code> to <code>@import "tailwindcss/base"</code> etc.</li>
                    <li class="text-gray-700"><strong>Adjust build process:</strong> Update your build scripts to work with the new version</li>
                </ol>
            </div>
        </section>

        <section>
            <h2 class="text-2xl font-semibold text-gray-800 mb-6">Example Components</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                    <h3 class="text-xl font-semibold text-gray-700 mb-4">Buttons</h3>
                    <div class="space-y-4">
                        <button class="btn-primary">Primary Button</button>
                        <button class="bg-secondary text-white px-4 py-2 rounded font-semibold">Secondary Button</button>
                        <button class="border border-gray-300 px-4 py-2 rounded text-gray-700 hover:bg-gray-50">Outlined Button</button>
                    </div>
                </div>

                <div>
                    <h3 class="text-xl font-semibold text-gray-700 mb-4">Form Elements</h3>
                    <div class="space-y-4">
                        <input type="text" placeholder="Enter your name" class="w-full px-4 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-primary focus:border-transparent">

                        <select class="w-full px-4 py-2 border border-gray-300 rounded focus:ring-2 focus:ring-primary focus:border-transparent">
                            <option>Option 1</option>
                            <option>Option 2</option>
                            <option>Option 3</option>
                        </select>

                        <div class="flex items-center">
                            <input type="checkbox" id="example-checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                            <label for="example-checkbox" class="ml-2 block text-sm text-gray-700">Check this box</label>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="bg-gray-800 text-white mt-16 py-8">
        <div class="container mx-auto px-4 text-center">
            <p>Tailwind CSS v4 Migration Example</p>
            <p class="mt-2 text-gray-400">This demo uses the new CSS-first configuration approach</p>
        </div>
    </footer>
</body>
</html>

Key Changes in Tailwind CSS v4

CSS-First Configuration: Instead of configuring Tailwind in a JavaScript file (tailwind.config.js), you now define your theme using CSS custom properties within a @theme block.
New Import Syntax: The @tailwind directive is replaced with @import "tailwindcss" for base styles, components, and utilities.
Simplified Setup: The build process is simplified with fewer dependencies required.
Performance: v4 is significantly faster with up to 10x faster build times in many cases.

Migration Steps in Detail

1. Update Your Dependencies

npm uninstall tailwindcss
npm install tailwindcss@next

2. Convert Your Configuration

Instead of a tailwind.config.js file, add your theme configuration to your main CSS file:

@import "tailwindcss";

@theme {
  /* Convert your theme configuration here */
  --color-primary: #3b82f6;
  --color-secondary: #f97316;
  /* Add other theme values as CSS custom properties */
}

3. Update Your Build Process

Adjust your build scripts to work with the new version. If you were using PostCSS, you might need to update your configuration.

4. Test Your Application

Thoroughly test your application to ensure all styles are working correctly with the new configuration.

This example demonstrates the new CSS-first approach while maintaining the utility-first philosophy that makes Tailwind powerful. The migration maintains backward compatibility for most utilities while offering a more flexible configuration system.

[Boost]

Aleksandr Ippatev — Fri, 22 Aug 2025 03:17:18 +0000

Aleksandr Ippatev

Aug 22 '25

Managing Tailwind CSS in Turborepo Packages

#tailwindcss #turborepo #monorepo #webdev

Comments

2 min read

Managing Tailwind CSS in Turborepo Packages

Aleksandr Ippatev — Fri, 22 Aug 2025 03:14:56 +0000

Managing Tailwind CSS in Turborepo Packages

When working with a Turborepo that has multiple packages, you'll need to handle Tailwind CSS imports and configuration properly. Here's how to set up individual index.css files for each package:

Project Structure

your-turborepo/
├── apps/
│   └── web/                 # Example app
│       ├── src/
│       │   └── index.css    # App-specific CSS
│       └── tailwind.config.js
├── packages/
│   ├── ui/                  # UI components package
│   │   ├── src/
│   │   │   └── index.css    # Package-specific CSS
│   │   └── tailwind.config.js
│   └── utils/               # Another package
│       ├── src/
│       │   └── index.css
│       └── tailwind.config.js
├── tailwind.config.preset.js # Shared base config
└── package.json

Implementation

1. Create Shared Preset (Root Level)

// tailwind.config.preset.js
module.exports = {
  content: [
    // This will be overridden in individual packages
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6',
        secondary: '#10B981',
      },
    },
  },
  plugins: [],
};

2. Package-specific Tailwind Config

// packages/ui/tailwind.config.js
const sharedConfig = require('../../tailwind.config.preset');

module.exports = {
  presets: [sharedConfig],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    // Add other paths if this package consumes other packages
  ],
  theme: {
    extend: {
      // Package-specific extensions
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in-out',
      }
    },
  },
};

3. Package-specific CSS Files

/* packages/ui/src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Package-specific custom styles */
@layer components {
  .btn-primary {
    @apply bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark transition-colors;
  }

  .card {
    @apply bg-white rounded-xl shadow-md p-6;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

4. PostCSS Configuration

// packages/ui/postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: { config: './tailwind.config.js' },
    autoprefixer: {},
  },
};

5. Import CSS in Package Entry Points

// packages/ui/src/index.ts
import './index.css';

// Export your components
export { Button } from './Button';
export { Card } from './Card';

6. Handling in Apps

In your applications (like the web app), you'll need to:

Import the CSS from consumed packages
Set up your own Tailwind config that includes the packages

// apps/web/tailwind.config.js
const sharedConfig = require('../../tailwind.config.preset');

module.exports = {
  presets: [sharedConfig],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    // Include paths to packages you're using
    '../../packages/ui/src/**/*.{js,ts,jsx,tsx}',
  ],
};

/* apps/web/src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

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

Build Process Considerations

When building your packages, make sure:

Each package's build process includes CSS processing
The built CSS is properly bundled with the package
Apps that consume packages also process the CSS from those packages

This setup allows each package to have its own Tailwind configuration and styles while maintaining a consistent design system through the shared preset.

[Boost]

Aleksandr Ippatev — Mon, 02 Jun 2025 09:49:01 +0000

Pop OS! Cosmic 24.0.4 Release Date

Aleksandr Ippatev ・ Jun 2

#popos #cosmic #ubuntu #system76

[Boost]

Aleksandr Ippatev — Mon, 02 Jun 2025 09:41:55 +0000

Aleksandr Ippatev

Jun 2 '25

The services and methods for creating Google Tasks templates

#tasks #googletasks #tasktemplates #calendar

Comments

3 min read

The services and methods for creating Google Tasks templates

Aleksandr Ippatev — Mon, 02 Jun 2025 09:40:34 +0000

Here's more detail on the services and methods for creating Google Tasks templates, as mentioned previously:

Copying Tasks in Google Tasks:
- How it works: In Google Tasks (accessible via tasks.google.com or integrated with Google Calendar/Gmail), create a task list (e.g., "Project Template") with predefined tasks, subtasks, due dates, and notes. To reuse, select tasks, use the "Copy Tasks" option (right-click or menu), and paste them into a new list using "Paste task(s) as...". This preserves task details but requires manual duplication.
- Pros: Simple, no external tools needed, free.
- Cons: Manual process, no dynamic automation.
- Use case: Best for small, repetitive projects (e.g., weekly team checklists).
- Tip: Organize tasks with clear naming (e.g., "Task 1: Review Docs") for easy reuse.
Using Google Sheets:
- How it works: Google Sheets templates can structure tasks with columns for Task Name, Description, Priority, Due Date, Status, and Assignee. Sites like Template.net (offers free/premium task trackers) or GooDocs (free Google Sheets templates) provide prebuilt options. Customize these by adding formulas (e.g., =TODAY() for dynamic dates) or conditional formatting (e.g., highlight overdue tasks).
- Pros: Highly customizable, shareable, integrates with Google ecosystem.
- Cons: Requires manual task entry into Google Tasks unless automated.
- Use case: Ideal for detailed project planning or team collaboration.
- Resources:
  - Template.net: Search "Google Sheets Task Template" for options like Gantt charts or to-do lists.
  - GooDocs: Offers free templates like "Daily Planner" or "Task Management".
Automation Tools (Make/Zapier):
- How it works: Platforms like Make (formerly Integromat) or Zapier connect Google Tasks with apps like Notion, ClickUp, or Google Sheets to automate template-based task creation. For example, set up a trigger (e.g., new Notion database entry) to create tasks in Google Tasks with predefined details (title, due date, etc.).
- Pros: Saves time, supports complex workflows, integrates multiple apps.
- Cons: Requires setup, may have costs (Make: $9+/mo; Zapier: $19.99+/mo for advanced features).
- Use case: Automating recurring tasks (e.g., onboarding new clients).
- Setup example: In Zapier, create a "Zap" with a trigger (e.g., new Google Sheet row) and action (e.g., "Create Task" in Google Tasks). Map fields like task title or due date from the sheet.
Google Apps Script:
- How it works: Use Google Apps Script (script.google.com) to write custom code for automating task template creation via the Google Tasks API. For example, a script can generate a task list from a template stored in Google Sheets or create tasks with predefined attributes (e.g., recurring weekly tasks). Basic script example:
```
 function createTaskTemplate() {
   var tasksService = Tasks.newTask();
   tasksService.title = "Weekly Review";
   tasksService.due = "2025-06-09T00:00:00.000Z";
   Tasks.Tasks.insert(tasksService, "TASKLIST_ID");
 }
```

Pros: Free, highly customizable, integrates with Google Workspace.
Cons: Requires coding knowledge, setup time.
Use case: Advanced automation for teams with specific workflows.
Resources: Google Tasks API docs (developers.google.com/tasks).

Additional Notes:

Template.net: Offers both free and premium templates. Premium plans start at ~$2/mo for access to advanced task trackers.
GooDocs: Fully free, but templates are simpler. Download directly to Google Sheets.
Make/Zapier: Check free tiers for basic automation; paid plans unlock multi-step workflows.
Apps Script: Use Google’s Script Editor or explore GitHub for sample scripts (search “Google Tasks automation”).

If you want a specific template example, automation setup guide, or a sample Apps Script, let me know your use case!

[Boost]

Aleksandr Ippatev — Thu, 22 May 2025 00:25:24 +0000

Omri Luz

May 19 '25

Best Practices for JavaScript Modularization

#javascript #programming #webdev #advanced

Comments 1

5 min read

[Boost]

Aleksandr Ippatev — Fri, 18 Apr 2025 01:27:59 +0000

Cristian Sifuentes

Apr 18 '25

Angular 19: Mastering `input.required()` and Functional Inputs with Signals

#angular #webdev #programming #typescript

Comments 1

2 min read

[Boost]

Aleksandr Ippatev — Wed, 05 Mar 2025 02:37:15 +0000

🚨 Micro-frontends: The Dumbest Idea Tech Bros Have Ever Sold to Businesses 🚨

Itamar Tati ・ Feb 28 '25

#microservices #webdev #javascript #career

Airbnb landing page with vue.js

Aleksandr Ippatev — Tue, 21 Sep 2021 07:14:59 +0000

preview: https://practical-nobel-81a61b.netlify.app/

tech stack: vue 3, vue router, typescript, scss ...etc
source code: https://github.com/ippatev/airbnb-landingpage-vue

How do revert all local changes in Git?

Aleksandr Ippatev — Mon, 13 Sep 2021 06:46:50 +0000

If you want to revert changes made to your working copy, do this:

git checkout .

If you want to revert changes made to the index (i.e., that you have added), do this. Warning this will reset all of your unpushed commits to master!:

git reset

If you want to revert a change that you have committed, do this:

git revert <commit 1> <commit 2>

If you want to remove untracked files (e.g., new files, generated files):

git clean -f

Or untracked directories (e.g., new or automatically generated directories):

git clean -fd