yjthghg

nvnnn

If you want to use TOAST UI’s CSS stylesheets in your project, you can either include them via a CDN or install them via npm and import locally.

Here’s a complete guide:

1. Using CDN (Quick Setup)

Add the following <link> tags in your HTML <head>:

Html<!-- TOAST UI CSS (Example: Editor) -->
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css">

<!-- Optional: TOAST UI Chart -->
<link rel="stylesheet" href="https://uicdn.toast.com/chart/latest/toastui-chart.min.css">

<!-- Optional: TOAST UI Grid -->
<link rel="stylesheet" href="https://uicdn.toast.com/grid/latest/tui-grid.min.css">

Replace the URLs with the specific TOAST UI component you are using (Editor, Grid, Chart, Calendar, etc.).

2. Using npm (Recommended for Projects)

If you’re using a build system (Webpack, Vite, etc.):

Bashnpm install @toast-ui/editor @toast-ui/chart @toast-ui/grid

Then import the CSS in your JavaScript or SCSS file:

Javascript// Editor
import '@toast-ui/editor/dist/toastui-editor.css';

// Chart
import '@toast-ui/chart/dist/toastui-chart.min.css';

// Grid
import 'tui-grid/dist/tui-grid.min.css';

3. Customizing TOAST UI CSS

TOAST UI uses standard CSS and Sass variables for theming.

You can override styles in your own stylesheet after importing the default CSS:

Css/* Override TOAST UI Editor background */
.toastui-editor-defaultUI {
    background-color: #f9f9f9;
}

/* Change Grid header color */
.tui-grid-header {
    background-color: #333;
    color: white;
}

✅ Tip:

• Always load TOAST UI’s CSS before your custom overrides.

• Check the TOAST UI CSS documentation for the exact class names and variables for each component.

If you want, I can prepare a full HTML example that loads TOAST UI with its CSS and a working component so you can test it immediately.

Do you want me to create that?