# @settld/tailwindcss-config

> Shared Tailwind CSS preset for web development projects.

Latest version **1.2.0** (published 2022-05-09) · 0 weekly downloads

## Install

```sh
npm install @settld/tailwindcss-config
pnpm add @settld/tailwindcss-config
yarn add @settld/tailwindcss-config
bun add @settld/tailwindcss-config
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2022-05-09 |
| First published | 2022-03-12 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 4.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | shiaohoo |
| Keywords | tailwindcss, tailwindcss-config |

## Links

- npm: https://www.npmjs.com/package/@settld/tailwindcss-config
- Repository: https://github.com/settld-io/paid-front-end
- Homepage: https://npm.im/@settld/tailwindcss-config
- Issues: https://github.com/settld-io/paid-front-end/issues
- npm.io page: https://npm.io/package/@settld/tailwindcss-config

## Dependencies (5)

- [mini-svg-data-uri](https://npm.io/package/mini-svg-data-uri.md) ^1.4.4
- [@tailwindcss/forms](https://npm.io/package/@tailwindcss/forms.md) ^0.5.1
- [@tailwindcss/line-clamp](https://npm.io/package/@tailwindcss/line-clamp.md) ^0.4.0
- [@tailwindcss/typography](https://npm.io/package/@tailwindcss/typography.md) ^0.5.2
- [@tailwindcss/aspect-ratio](https://npm.io/package/@tailwindcss/aspect-ratio.md) ^0.4.0

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads
- [@modern-js/plugin-swc](https://npm.io/package/@modern-js/plugin-swc.md) — 3.4K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2022-05-09
- 1.1.0 — 2022-04-10
- 1.0.0 — 2022-03-12

## README

# @settld/tailwindcss-config

![Peer Tailwind CSS Version](https://img.shields.io/npm/dependency-version/@settld/tailwindcss-config/peer/tailwindcss)

Shared Tailwind CSS preset for web development projects.

## How to use

There are two files [index.js](./index.js) and [plugin.js](./plugin.js) in the shared prest.

### Custom design tokens

Change design tokens like colors, typography and breakpoints in [index.js](./index.js), below is an example.

```js
const colors = require('tailwindcss/colors');
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  theme: {
    colors: {
      ...colors,

      // Add user custom colors here
      primary: colors.blue,
      secondary: colors.indigo,
    },

    fontFamily: {
      ...defaultTheme.fontFamily,

      // Add user custom font family here
      brand: ['Barlow', 'sans-serif'],
    },

    // Add user custom breakpoints here
    screens: {
      xs: '368px',
      sm: '686px',
      md: '1024px',
      lg: '1220px',
    },
  },
};
```

### Add/Change base classes

If there are some user customize tailwindcss classes you will to use in project frequently, you should add them in [index.js](./index.js), below is an example.

```js
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  theme: {
    borderRadius: {
      ...defaultTheme.borderRadius,

      // Add user custom here
      half: '50%',
      third: '33.3%',
    },
  },
};
```

### Use official or custom tailwindcss plugins

For official plugins, you should install it with `pnpm`, then require it in plugin list, for local plugin, just require the relative path of the plugin.

```js
/** @type {import('tailwindcss/tailwind-config').TailwindConfig} */
module.exports = {
  plugins: [
    // An official plugin
    require('@tailwindcss/forms'),

    // An user defined local plugin
    require('./plugin'),
  ],
};
```

### Add tailwindcss utilities with custom plugin

We can define a local plugin to add more utilities to tailwindcss, write utility block in `CSS-in-JS` format, below is a example.

```js
const plugin = require('tailwindcss/plugin');

module.exports = plugin(({ addUtilities, theme }) => {
  addUtilities({
    '.overlay': {
      position: 'absolute',
      right: 0,
      left: 0,
      height: '100%',
      width: '100%',
      overflow: 'hidden',
    },
  });
});
```

---
_Source: https://npm.io/package/@settld/tailwindcss-config · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._