[AI-skills]: Claude Sonnet 4.6: Themes .css files are not imported correctly in projects with Tailwind

[dafo]

Description

If you add an IgniteUI for React component to a Next.js project, the correct themes .css files are not imported in the .tsx file.

Steps to reproduce

1. npx create-next-app@latest
2. Copy the Skills .md files to the project

Before answering, read and follow the conventions defined in the Markdown files under <path/to/skills>
Apply those rules strictly.

Generate a landing page with navigation and a grid displaying dummy data for a groceries store. I want the grid to have 6 rows a page and a total of 12 rows. Use Ignite UI for React components.

Result

The grid is missing its' styles. Instead of icons we see placeholders.

'use client';

import { IgrNavbar, IgrButton } from 'igniteui-react';
import { IgrGrid, IgrColumn, IgrPaginator } from 'igniteui-react-grids';

Sonnet 4.6:

The grids package uses an internal icon registry with SVG-based icons. When imported as CSS @import inside Tailwind's globals.css, Turbopack doesn't resolve the relative URL references inside those CSS files properly. The fix is to import both theme CSS files as JavaScript imports directly in the component, which Turbopack handles with correct URL resolution.
The grid CSS begins with @import "https://fonts.googleapis.com/icon?family=Material+Icons", but Tailwind v4's PostCSS pipeline doesn't forward nested @import URLs to the browser, so the Material Icons font never loads and icon names render as raw text.

Fix: add the Material Icons directly to the in layout.tsx and import the grid CSS as a JS import (from the component) instead of relying on the CSS chain.

Expected result

'use client';

import 'igniteui-webcomponents/themes/light/bootstrap.css';
import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';

import { IgrNavbar, IgrButton } from 'igniteui-react';
import { IgrGrid, IgrColumn, IgrPaginator } from 'igniteui-react-grids';

Attachments

Attach a sample if available, and screenshots, if applicable.