Themer

https://github.com/tailus-ui/themer
Admin
Tailwind CSS Styling Library for Building Modern, Consistent and Accessible Web UIs
Tokens:1,204
Snippets:12
Trust Score:8.3
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Installing Tailus Themer Plugins - Bash

Source: https://github.com/tailus-ui/themer/blob/main/packages/plugins/README.md

This snippet provides the command to install the Tailus Themer plugins package using npm. It is the essential first step in the quick start guide for developers wanting to integrate and utilize these plugins. Successful execution requires Node.js and the npm package manager to be previously installed and configured on the system.

```bash
npm install @tailus/themer-plugins
```

--------------------------------

### Installing Tailus Themer with npm (Bash)

Source: https://github.com/tailus-ui/themer/blob/main/README.md

This command installs the Tailus Themer library into your project using the npm package manager. It adds the library as a dependency, making its features available for use in your project's build process. Requires npm and Node.js installed.

```bash
npm install @tailus/themer
```

--------------------------------

### Installing Tailus Themer Package (bash)

Source: https://github.com/tailus-ui/themer/blob/main/packages/themer/README.md

This command installs the `@tailus/themer` package using npm, adding it as a dependency to your project. It's the first step to integrate Tailus Themer into your web development workflow.

```bash
npm install @tailus/themer
```

--------------------------------

### Configuring Tailwind CSS with Tailus Themer Preset (JavaScript)

Source: https://github.com/tailus-ui/themer/blob/main/README.md

This JavaScript configuration snippet updates your Tailwind CSS setup to integrate Tailus Themer. It imports the `themer` preset and `grayColorVariables`, adds the library's files to the `content` array for JIT compilation, extends the theme with the necessary gray colors, and includes the `themer` preset to enable its features and data attribute customization. Requires Tailwind CSS and Tailus Themer installed.

```javascript
import type { Config } from 'tailwindcss'
import { themer, grayColorVariables } from '@tailus/themer'

module.exports =  {
  content: [
    // your other paths
    "./node_modules/@tailus/themer/dist/**/*.{js,ts}",
  ],
  theme: {
    extend: {
      colors: {
        gray: grayColorVariables,
      },
    },
  },
  presets: [
    themer
  ]
} satisfies Config
```

--------------------------------

### Configuring Tailwind CSS with Themer Plugins (JavaScript)

Source: https://github.com/tailus-ui/themer/blob/main/packages/themer/README.md

This configuration snippet updates the `tailwind.config.js` file to include the Tailus Themer plugins and ensures Tailwind scans the themer package for utility classes. It requires Tailwind CSS and the `@tailus/themer` package to be installed.

```javascript
import type { Config } from 'tailwindcss'
import { shade, components, rounded, animations, palettes, palette } from '@tailus/themer'

module.exports =  {
  content: [
    // your other paths
    "./node_modules/@tailus/themer/dist/**/*.{js,ts}",
  ],
  theme: {
    extend: {
      colors: palettes.trust,
    },
  },
  plugins: [
    shade,
    rounded,
    components,
    animations,
    palette
  ]
} satisfies Config
```

--------------------------------

### Applying Color Palette via Data Attribute (HTML)

Source: https://github.com/tailus-ui/themer/blob/main/packages/themer/README.md

This HTML snippet demonstrates how to apply a predefined color palette from Tailus Themer to the document by setting the `data-palette` attribute on the `<html>` element. This allows for easy switching of the entire site's color scheme.

```html
<html data-palette="trust"></html>
```

--------------------------------

### Applying Border Radius via Data Attribute (HTML)

Source: https://github.com/tailus-ui/themer/blob/main/packages/themer/README.md

This HTML snippet illustrates how to globally adjust the border radius of elements in the theme by setting the `data-rounded` attribute on the `<html>` element. It allows for quick changes to the overall "roundedness" aesthetic.

```html
<html data-rounded="xlarge"></html>
```

--------------------------------

### Setting HTML data-shadow Attribute for Theme Shadow (HTML)

Source: https://github.com/tailus-ui/themer/blob/main/README.md

This HTML snippet demonstrates the intended use of the `data-shadow` attribute on the `<html>` element to adjust the default shadow style used within the theme. Although marked as not yet available, this attribute is designed to control the depth or prominence of shadows on UI elements. The value "medium" represents one possible shadow preset.

```html
<html data-shadow="medium"></html>
```

--------------------------------

### Setting HTML data-palette Attribute for Theme Color (HTML)

Source: https://github.com/tailus-ui/themer/blob/main/README.md

This HTML snippet demonstrates how to use the `data-palette` attribute on the `<html>` element to apply a specific color palette to the theme. Setting this attribute changes the default color scheme used by Tailus Themer components. The value "trust" selects the "trust" palette; other values like "romance", "passion", etc., are also available.

```html
<html data-palette="trust"></html>
```

--------------------------------

### Adjusting Theme Shade via Data Attribute (HTML)

Source: https://github.com/tailus-ui/themer/blob/main/packages/themer/README.md

This HTML snippet shows how to modify the theme's shade, particularly affecting background and border colors, by setting the `data-shade` attribute on the `<html>` element. This is especially noticeable in dark mode.

```html
<html data-shade="900"></html>
```

--------------------------------

### Setting HTML data-shade Attribute for Theme Shade (HTML)

Source: https://github.com/tailus-ui/themer/blob/main/README.md

This HTML snippet illustrates using the `data-shade` attribute on the `<html>` element to adjust the shade of background and border colors, particularly impactful in dark mode. Setting this attribute changes the intensity or darkness level of certain theme elements. The value "900" is one of the available options like "800", "925", "950", and "glassy".

```html
<html data-shade="900"></html>
```

--------------------------------

### Setting HTML data-rounded Attribute for Border Radius (HTML)

Source: https://github.com/tailus-ui/themer/blob/main/README.md

This HTML snippet shows how to use the `data-rounded` attribute on the `<html>` element to control the default border radius applied by the theme. Setting this attribute changes the corner rounding of various UI elements managed by Tailus Themer. The value "xlarge" is one of many predefined rounding sizes available.

```html
<html data-rounded="xlarge"></html>
```
Tokens:
Raw