Documentation of the CityLAB Berlin styling utilities for TailwindCSS
alpha
Installation
echo "@technologiestiftung:registry=https://npm.pkg.github.com" > .npmrc
npm install -D @technologiestiftung/citylab-berlin-theme
// tailwind.config.js
const { theme, base } = require("@technologiestiftung/citylab-berlin-theme");
module.exports = {
presets: [theme],
plugins: [base], // <- optional
// other settings
};
More detailed installation and usage instructions can be found in the GitHub repository.
Theme
The provided theme preset is an
extension of the
default Tailwind theme
and comes with the following customizations.
colors
Four colors are available in different shades.
magenta
-
50 -
100 -
200 -
300 -
400 -
500
blue
-
50 -
100 -
200 -
300 -
400 -
500
gray
-
50 -
100 -
200 -
300 -
400 -
500 -
600 -
700 -
800 -
900
white
fontFamily
The primary font family is a set of sans-serif fonts. A monospace
font family is available with
monospace.
sans
"National Regular", "Calibri", "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica
Neue", "Helvetica", "Arial", "sans-serif"
Base styles
The base plugin provides some basic
styling for HTML elements. See some examples here:
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit link amet, consectetur adipisicing elit. Maiores quis another link culpa quos doloribus veritatis omnis alias reiciendis soluta hic quidem repellendus unde vitae corporis quae esse eveniet sunt, dolores dolorum?
Lorem ipsum dolor sit bolded amet, consectetur adipisicing elit. Tempore neque unde, ex also bolded reprehenderit pariatur, voluptatibus molestiae voluptate italicized aspernatur quaerat alias recusandae saepe, voluptatum also italicized incidunt amet et totam corporis id eos!
Lorem ipsum dolor sit amet text mark consectetur
adipisicing elit. Excepturi a
This is a quote, this is a quote
maiores vero blanditiis
adipisci, perferendis nihil, dignissimos aliquid consequatur
voluptas dolorum rerum? Magnam, id nobis veniam corrupti perferendis
illo eum.
Lorem ipsum, dolor sit amet strike-through consectetur
adipisicing elit. Est reiciendis eligendi tenetur debitis corporis
sint amet blanditiis eaque, maiores hic laborum natus libero veniam
reprehenderit repudiandae sequi quidem possimus molestiae.
Lorem ipsum dolor sit amet consectetur adipisicing elit. a2 + b2 = c2 / H2O
This is a blockquote. This is a blockquote. This is a blockquote. This is a blockquote.
Elements
Summary element
A longer details text on demand. A longer details text on demand. A longer details text on demand. A longer details text on demand.