---
title: "Import CSS plugin"
description: "Automatically populate CSS class names into the Format dropdown."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/importcss/"
md_url: "https://www.tiny.cloud/docs/tinymce/7/importcss/index.md"
version: "7"
last_updated: "2022-11-30T01:26:11Z"
tokens: 1486
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/importcss/).
# Import CSS plugin

The `importcss` plugin adds the ability to automatically import CSS classes from the CSS file specified in the [`content_css`](../add-css-options/#content_css) configuration setting.

By default selectors like `".my-class"`, `".my-class1.my-class2"` and `"p.my-class"` get imported as format rules.

## Basic setup

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'importcss',
  content_css: '/my-styles.css'
});
```

## Options

These settings affect the execution of the `importcss` plugin, specifically the way that these operations are handled.

### `importcss_append`

If set to `true` this option will append the imported styles to the end of the `Format` menu and will replace the default formats.

**Type:** `Boolean`

**Default value:** `false`

#### Example: using `importcss_append`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_append: true
});
```

### `importcss_exclusive`

If set to `false` then selectors will not be globally exclusive meaning they can exist in two separate groups. This can be useful for scenarios where you want to have a ".class" imported as a paragraph selector and as a span format selector.

**Type:** `Boolean`

**Default value:** `true`

#### Example: using `importcss_exclusive`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_exclusive: false
});
```

### `importcss_file_filter`

This option enables you to add the CSS files that should be used for populating the styles drop down. This will go through any `@import` rules and only target the specified file. This option can be either a `String`, `RegExp` or a `Function`. This also allows you to import styles form existing files on the currently editable page in inline mode.

**Type:** `String`, `RegExp` or `Function`

#### Example: using `importcss_file_filter`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_file_filter: '/my-styles.css'
});
```

#### Example using a RegExp filter with `importcss_file_filter`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_file_filter: /\/my-styles/
});
```

#### Example using a function filter with `importcss_file_filter`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_file_filter: (file) =>
    file.indexOf('my-styles') !== -1
});
```

### `importcss_groups`

This option enables group matching selectors into submenus in the `Formats` menu dropdown. You can use a `String`, `RegExp` or a `Function` to filter selectors. You can also omit the filter to get all non-matching ones into a specific group. You can also specify a group specific `selector_converter` so that formats for a specific group are produced by that converter.

**Type:** `Array`

#### Example using a string filter with `importcss_groups`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_groups: [
    { title: 'Table styles', filter: /^(td|tr)\./ }, // td.class and tr.class
    { title: 'Block styles', filter: /^(div|p)\./ }, // div.class and p.class
    { title: 'Other styles' } // The rest
  ]
});
```

### `importcss_merge_classes`

This option is used in cases where the class attribute should be replaced or merged. For example, if you have multiple classes you can apply all of them to the same element. If this option is set to `false` it will always replace the contents of the class attribute.

**Type:** `Boolean`

**Default value:** `true`

#### Example: using `importcss_merge_classes`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_merge_classes: false
});
```

### `importcss_selector_converter`

This option allows you to override the default selector to format converter function. This allows you to parse the CSS selectors manually and produce format objects out of them. If the converter returns a `false` value the selector is ignored from import.

**Type:** `Function`

#### Example: using `importcss_selector_converter`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_selector_converter: (selector) => {
    // Custom logic
  }
});
```

### `importcss_selector_filter`

This option enables you to only import classes from selectors matching the filter. The filter can be a `String`, `RegExp` or a `Function`. See the examples below.

**Type:** `String`, `RegExp` or `Function`

#### Example using a string filter with `importcss_selector_filter`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_selector_filter: '.my-prefix-'
});
```

#### Example using a RegExp filter with `importcss_selector_filter`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_selector_filter: /\.prefix|\.otherprefix/
});
```

#### Example using a function filter with `importcss_selector_filter`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'importcss',
  content_css: '/my-styles.css',
  importcss_selector_filter: (selector) =>
    selector.indexOf('myprefix') !== -1
});
```