@nova-design-system/nova-base 3.29.0 → 3.31.0

package/README.md

@@ -36,54 +36,47 @@ Include the tokens CSS in your project (two themes are available: Spark and Ocea
 @import '@nova-design-system/nova-base/dist/css/ocean.css';
 ```
 
-### Recommended Approach: Using Tailwind CSS with Nova Theme and Plugin
+### Recommended Approach: Using Tailwind CSS v4 with Nova Theme and Plugin
 
-The recommended approach is to set up Tailwind CSS and use our tokens, `novaTailwindTheme`, and `novaTailwindPlugin` for the Tailwind configuration. This method provides a smaller CSS bundle and access to more utilities than the precompiled CSS.
+The recommended approach is to set up Tailwind CSS v4 and use the Nova theme and plugin via CSS directives. This method provides a smaller CSS bundle and access to more utilities than the precompiled CSS.
 
 #### Prerequisites
 
-Ensure that Tailwind CSS is installed in your project. If not, you can install it by following the [Tailwind CSS installation guide](https://tailwindcss.com/docs/installation).
+Ensure that Tailwind CSS v4 is installed in your project. If not, you can install it by following the [Tailwind CSS installation guide](https://tailwindcss.com/docs/installation).
 
-#### Tailwind Configuration
+#### CSS Configuration
 
-After setting up Tailwind CSS, add the following to your `tailwind.config.js`:
+Tailwind CSS v4 uses a CSS-first configuration. In your main CSS file, import Tailwind and configure the Nova plugin and theme:
 
-```js
-import {
-  novaTailwindTheme,
-  novaTailwindPlugin,
-} from '@nova-design-system/nova-base/theme';
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  // ...
-  theme: novaTailwindTheme,
-  plugins: [novaTailwindPlugin],
-};
-```
+```css
+/* Import the theme tokens */
+@import '@nova-design-system/nova-base/dist/css/spark.css';
+/* Or: @import '@nova-design-system/nova-base/dist/css/ocean.css'; */
 
-The `novaTailwindTheme` maps our CSS variable tokens to utilities, ensuring consistent styling across your project. The `novaTailwindPlugin` adds additional base styles, components, and utilities.
+@import "tailwindcss";
 
-#### Importing Theme Tokens in CSS
+@plugin "@nova-design-system/nova-base/theme/plugin";
+@config "./tailwind.config.ts";
+```
 
-In your CSS file, along with the default Tailwind imports, you should import the tokens for the theme:
+Then create a minimal `tailwind.config.ts` with the Nova theme:
 
-```css
-/* Import the theme tokens */
-@import '@nova-design-system/nova-base/dist/css/spark.css';
+```ts
+import type { Config } from 'tailwindcss';
+import { novaTailwindTheme } from '@nova-design-system/nova-base/theme';
 
-/* Tailwind CSS imports */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+const config: Config = {
+  theme: novaTailwindTheme,
+};
 
-/* Or, for the Ocean theme */
-/* @import '@nova-design-system/nova-base/dist/css/ocean.css'; */
+export default config;
 ```
 
+The `novaTailwindTheme` maps Nova CSS variable tokens to Tailwind utilities. The `novaTailwindPlugin` (loaded via `@plugin`) adds base styles, components, and custom utilities like `text-high`, `bg-level-00`, and typography classes.
+
 #### Benefits of Using Tailwind CSS with Nova Theme and Plugin
 
-- **Smaller CSS Bundle:** By configuring Tailwind CSS with our theme and plugin, you eliminate unused styles, resulting in a significantly smaller CSS file.
+- **Smaller CSS Bundle:** Tailwind CSS v4 only generates CSS for classes actually used in your source files, resulting in a significantly smaller output.
 - **More Utilities:** Gain access to a wider range of utilities beyond those included in the precompiled CSS.
 - **Customization:** Tailwind CSS allows you to customize and extend your styles as needed.
 
@@ -97,4 +90,4 @@ import '@nova-design-system/nova-base/dist/css/spark.css';
 import '@nova-design-system/nova-base/dist/css/nova-utils.css';
 ```
 
-**Note:** The precompiled CSS includes a whitelist of Tailwind classes and is quite large. This approach is only recommended if you cannot set up Tailwind CSS yourself.
+**Note:** The precompiled CSS includes a broad set of pre-generated Tailwind utility classes and is quite large. This approach is only recommended if you cannot set up Tailwind CSS yourself.