@settld/tailwindcss-config
Version:
Shared Tailwind CSS preset for web development projects.
104 lines (78 loc) • 2.38 kB
Markdown
# @settld/tailwindcss-config
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',
},
});
});
```