Common TailwindCSS configuration for Slipmat.io projects. The project versioning follows Tailwind major versions (ie. v3.x of this package use Tailwind 3.x).
This configuration adds:
- Slipmat colors:
slipmatfor Slipmat red (slipmat-500is the logo color)
- Play font to default sans fonts
First install the package:
pnpm add -D @slipmatio/tailwind-config
then add require('@slipmatio/tailwind-config') to presets array in tailwind.config.js.
You can then extend the config if you want. Extended properties override the defaults:
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [require('@slipmatio/tailwind-config')],
theme: {
extend: {
fontFamily: {
source: ['Source Sans Pro', 'sans-serif'],
},
},
},
}Install the Play font by adding following tags to the <head> of the main template:
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap"
rel="stylesheet"
/>pnpm publish --access public
More from Tailwind documentation.
Follow @Uninen on Twitter.