diff --git a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md index c6178d0fdf..79c38662bc 100644 --- a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md @@ -143,22 +143,19 @@ Before initializing the Syncfusion Angular Spreadsheet component, generate a Syn ## Add CSS references -Add the following Spreadsheet and dependent component styles to `src/styles.css` file. Replace the existing content with the theme import code below. +To apply the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme, install the corresponding theme package by using the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +The installed theme package includes an `index.css` file that automatically imports all the required dependency styles. Import the following stylesheet into `src/styles.css` file. Replace the existing content with the theme import code below. ```css -@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-angular-spreadsheet/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; ``` -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/angular/documentation/appearance/overview) for information about the available themes and the different ways to include theme styles in an Angular application. +> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `ej2-tailwind3-theme` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/angular/documentation/appearance/overview#theme-packages) for information about the available themes and the different ways to include theme styles in an Angular application. ## Add the Syncfusion® Angular Spreadsheet component diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md index b314be4cb3..82524b897d 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES5/getting-started.md @@ -109,27 +109,27 @@ Style: https://cdn.syncfusion.com/ej2/{VERSION}/{PACKAGE_NAME}/styles/{THEME_NAM - + - + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - + {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md index 91193e7a62..fe7a22a257 100644 --- a/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Javascript-ES6/getting-started.md @@ -61,26 +61,23 @@ Before initializing any Syncfusion components, generate a Syncfusion license key ## Add CSS references -Add the following style references for the Spreadsheet component and its dependent components. +To apply the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme, install the corresponding theme package by using the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +The installed theme package includes an `index.css` file that automatically imports all the required dependency styles. Add the following style references for the Spreadsheet component. {% tabs %} {% highlight css tabtitle="~/src/styles/styles.css" %} -@import '../../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; -@import '../../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '../../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import '../../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; -@import '../../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; -@import '../../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; -@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; -@import '../../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; -@import '../../node_modules/@syncfusion/ej2-spreadsheet/styles/tailwind3.css'; +@import '../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; {% endhighlight %} {% endtabs %} -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a TypeScript application. +> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `ej2-tailwind3-theme` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/documentation/appearance/theme#theme-packages) for information about the available themes and the different ways to include theme styles in a TypeScript application. ## Add the Syncfusion® Spreadsheet Component to the Application diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md index a0b4159c70..b722689375 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/create-react-app.md @@ -67,22 +67,19 @@ yarn add @syncfusion/ej2-react-spreadsheet ## Add CSS references -Add the following Spreadsheet and dependent component style references to the `src/App.css` file. Replace the existing content with the theme import code below. +To apply the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme, install the corresponding theme package by using the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +The installed theme package includes an `index.css` file that automatically imports all the required dependency styles. Import the following stylesheet into `src/App.css` file. Replace the existing content with the theme import code below. ```css -@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; ``` -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a React application. +> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `ej2-tailwind3-theme` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages) for information about the available themes and the different ways to include theme styles in a React application. ## Add the Syncfusion® React Spreadsheet Component diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/nextjs-getting-started.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/nextjs-getting-started.md index 4f1af50fbc..af29f32311 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/nextjs-getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/nextjs-getting-started.md @@ -101,26 +101,23 @@ yarn add @syncfusion/ej2-react-spreadsheet ## Import Syncfusion® CSS styles -Add the following Spreadsheet and dependent component style references to the `src/app/globals.css` file. Replace the existing content with the theme import code below. +To apply the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme, install the corresponding theme package by using the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +The installed theme package includes an `index.css` file that automatically imports all the required dependency styles. Import the following stylesheet into `src/app/globals.css` file. Replace the existing content with the theme import code below. {% tabs %} {% highlight css tabtitle="globals.css" %} -@import '@syncfusion/ej2-base/styles/tailwind3.css'; -@import '@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import '@syncfusion/ej2-lists/styles/tailwind3.css'; -@import '@syncfusion/ej2-navigations/styles/tailwind3.css'; -@import '@syncfusion/ej2-popups/styles/tailwind3.css'; -@import '@syncfusion/ej2-dropdowns/styles/tailwind3.css'; -@import '@syncfusion/ej2-grids/styles/tailwind3.css'; -@import '@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css'; +@import '@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; {% endhighlight %} {% endtabs %} -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a Next.js application. +> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `ej2-tailwind3-theme` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages) for information about the available themes and the different ways to include theme styles in a Next.js application. ## Add Syncfusion® React component diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md index 79d42885c5..4f54b90861 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/preact.md @@ -102,22 +102,19 @@ yarn add @syncfusion/ej2-react-spreadsheet ## Add CSS reference -Add the following Spreadsheet and dependent component styles to `src/style.css` file. +To apply the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme, install the corresponding theme package by using the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +The installed theme package includes an `index.css` file that automatically imports all the required dependency styles. Import the following stylesheet into `src/style.css` file. ```css -@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; ``` -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a React application. +> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `ej2-tailwind3-theme` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages) for information about the available themes and the different ways to include theme styles in a React application. ## Adding Spreadsheet component diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md index ca2a6e7d8f..15bd83a3df 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/remix.md @@ -71,22 +71,19 @@ npm install @syncfusion/ej2-react-spreadsheet ## Adding CSS reference -Import the Syncfusion® component themes in the `app.css` file as shown below: +To apply the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme, install the corresponding theme package by using the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +The installed theme package includes an `index.css` file that automatically imports all the required dependency styles. Import the following stylesheet into `app.css` file as shown below: ```css -@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css'; -@import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css'; +@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; ``` -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a React application. +> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `ej2-tailwind3-theme` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages) for information about the available themes and the different ways to include theme styles in a React application. ## Configure Server-Side Rendering (SSR) diff --git a/Document-Processing/Excel/Spreadsheet/React/environment-integration/sharepoint.md b/Document-Processing/Excel/Spreadsheet/React/environment-integration/sharepoint.md index 2dc4dae9c9..9a3372b58e 100644 --- a/Document-Processing/Excel/Spreadsheet/React/environment-integration/sharepoint.md +++ b/Document-Processing/Excel/Spreadsheet/React/environment-integration/sharepoint.md @@ -56,22 +56,19 @@ npm install @syncfusion/ej2-react-spreadsheet --save ``` ## Add CSS reference -Add the following Spreadsheet and dependent component styles to `~/src/webparts/app/components/App.tsx` file. +To apply the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme, install the corresponding theme package by using the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +The installed theme package includes an `index.css` file that automatically imports all the required dependency styles. Import the following stylesheet into `~/src/webparts/app/components/App.tsx` file. ```ts -require('@syncfusion/ej2-base/styles/tailwind3.css'); -require('@syncfusion/ej2-inputs/styles/tailwind3.css'); -require('@syncfusion/ej2-buttons/styles/tailwind3.css'); -require('@syncfusion/ej2-splitbuttons/styles/tailwind3.css'); -require('@syncfusion/ej2-lists/styles/tailwind3.css'); -require('@syncfusion/ej2-navigations/styles/tailwind3.css'); -require('@syncfusion/ej2-popups/styles/tailwind3.css'); -require('@syncfusion/ej2-dropdowns/styles/tailwind3.css'); -require('@syncfusion/ej2-grids/styles/tailwind3.css'); -require('@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css'); +require('@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'); ``` -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a React application. +> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `ej2-tailwind3-theme` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages) for information about the available themes and the different ways to include theme styles in a React application. ## Add Spreadsheet Component @@ -82,16 +79,7 @@ import * as React from 'react'; import { IAppProps } from './IAppProps'; import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; -require('@syncfusion/ej2-base/styles/tailwind3.css'); -require('@syncfusion/ej2-inputs/styles/tailwind3.css'); -require('@syncfusion/ej2-buttons/styles/tailwind3.css'); -require('@syncfusion/ej2-splitbuttons/styles/tailwind3.css'); -require('@syncfusion/ej2-lists/styles/tailwind3.css'); -require('@syncfusion/ej2-navigations/styles/tailwind3.css'); -require('@syncfusion/ej2-popups/styles/tailwind3.css'); -require('@syncfusion/ej2-dropdowns/styles/tailwind3.css'); -require('@syncfusion/ej2-grids/styles/tailwind3.css'); -require('@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css'); +require('@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'); export default class App extends React.Component { diff --git a/Document-Processing/Excel/Spreadsheet/React/getting-started.md b/Document-Processing/Excel/Spreadsheet/React/getting-started.md index 1a5be87557..6016856e78 100644 --- a/Document-Processing/Excel/Spreadsheet/React/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/React/getting-started.md @@ -141,22 +141,19 @@ Before initializing the Syncfusion React Spreadsheet component, generate a Syncf ## Add CSS references -Add the following Spreadsheet and dependent component styles to `src/index.css` file. Replace the existing content with the theme import code below. +To apply the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme, install the corresponding theme package by using the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +The installed theme package includes an `index.css` file that automatically imports all the required dependency styles. Import the following stylesheet into `src/index.css`. Replace the existing content with the theme import code below. ```css -@import '@syncfusion/ej2-base/styles/tailwind3.css'; -@import '@syncfusion/ej2-inputs/styles/tailwind3.css'; -@import '@syncfusion/ej2-buttons/styles/tailwind3.css'; -@import '@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; -@import '@syncfusion/ej2-lists/styles/tailwind3.css'; -@import '@syncfusion/ej2-navigations/styles/tailwind3.css'; -@import '@syncfusion/ej2-popups/styles/tailwind3.css'; -@import '@syncfusion/ej2-dropdowns/styles/tailwind3.css'; -@import '@syncfusion/ej2-grids/styles/tailwind3.css'; -@import '@syncfusion/ej2-react-spreadsheet/styles/tailwind3.css'; +@import '@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css'; ``` -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a React application. +> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `ej2-tailwind3-theme` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages) for information about the available themes and the different ways to include theme styles in a React application. ## Add the Syncfusion® React Spreadsheet component diff --git a/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md b/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md index 2719f74608..88caed1322 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/getting-started.md @@ -51,25 +51,23 @@ Before initializing the Syncfusion Vue Spreadsheet control, generate a Syncfusio ## Add CSS references -Add the following Spreadsheet and dependent component style references in the **\** section. Replace the existing content with the theme import code below. +To apply the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme, install the corresponding theme package by using the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +The installed theme package includes an `index.css` file that automatically imports all the required dependency styles. Import the following stylesheet references in the **\** section. Replace the existing content with the theme import code below. {% tabs %} {% highlight css tabtitle="~/src/App.vue" %} -@import "@syncfusion/ej2-base/styles/tailwind3.css"; -@import "@syncfusion/ej2-buttons/styles/tailwind3.css"; -@import "@syncfusion/ej2-dropdowns/styles/tailwind3.css"; -@import "@syncfusion/ej2-inputs/styles/tailwind3.css"; -@import "@syncfusion/ej2-navigations/styles/tailwind3.css"; -@import "@syncfusion/ej2-popups/styles/tailwind3.css"; -@import "@syncfusion/ej2-splitbuttons/styles/tailwind3.css"; -@import "@syncfusion/ej2-grids/styles/tailwind3.css"; -@import "@syncfusion/ej2-vue-spreadsheet/styles/tailwind3.css"; +@import "@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css"; {% endhighlight %} {% endtabs %} -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/vue/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a Vue application. +> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `ej2-tailwind3-theme` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/vue/documentation/appearance/theme#theme-packages) for information about the available themes and the different ways to include theme styles in a Vue application. ## Add the Vue Spreadsheet component to the application diff --git a/Document-Processing/Excel/Spreadsheet/Vue/vue-3-getting-started.md b/Document-Processing/Excel/Spreadsheet/Vue/vue-3-getting-started.md index fa6d752b8b..61e3929e63 100644 --- a/Document-Processing/Excel/Spreadsheet/Vue/vue-3-getting-started.md +++ b/Document-Processing/Excel/Spreadsheet/Vue/vue-3-getting-started.md @@ -120,25 +120,23 @@ npm install @syncfusion/ej2-vue-spreadsheet ## Add CSS references -Add the following Spreadsheet and dependent component styles to `src/style.css` file. Replace the existing content with the theme import code below. +To apply the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme, install the corresponding theme package by using the following command: + +```bash +npm install @syncfusion/ej2-tailwind3-theme +``` + +The installed theme package includes an `index.css` file that automatically imports all the required dependency styles. Import the following stylesheet into `src/style.css`. Replace the existing content with the theme import code below. {% tabs %} {% highlight html tabtitle="style.css" %} -@import "@syncfusion/ej2-base/styles/tailwind3.css"; -@import "@syncfusion/ej2-buttons/styles/tailwind3.css"; -@import "@syncfusion/ej2-dropdowns/styles/tailwind3.css"; -@import "@syncfusion/ej2-inputs/styles/tailwind3.css"; -@import "@syncfusion/ej2-navigations/styles/tailwind3.css"; -@import "@syncfusion/ej2-popups/styles/tailwind3.css"; -@import "@syncfusion/ej2-splitbuttons/styles/tailwind3.css"; -@import "@syncfusion/ej2-grids/styles/tailwind3.css"; -@import "@syncfusion/ej2-vue-spreadsheet/styles/tailwind3.css"; +@import "@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css"; {% endhighlight %} {% endtabs %} -> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `tailwind3.css` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/vue/documentation/appearance/theme) for information about the available themes and the different ways to include theme styles in a Vue application. +> **Note:** This example uses the `Tailwind3` theme. To use a different built-in theme, replace the `ej2-tailwind3-theme` references with the corresponding theme stylesheets. Refer to the [Themes documentation](https://ej2.syncfusion.com/vue/documentation/appearance/theme#theme-packages) for information about the available themes and the different ways to include theme styles in a Vue application. ## Add the Vue Spreadsheet component to the application