https://caniuse.com/#feat=font-family-system-ui
if a browser supports system-ui, it'll choose the best font and won't cascade through the fallback list. this protects tailwind from it's static list not being as up to date with platforms fonts as time goes on.
Set all headings to inherit the parent font size and reset the font
weight to normal. This prevents you from accidentally using browser
default sizes in your designs and deviating from your design system.
The only reason the config() helper function existed was to access your design tokens in your CSS, like:
```css
.foo {
color: config('colors.blue')
}
```
Now that design tokens are nested in the new `theme` section, using the `config()` function is a bit more verbose:
```css
.foo {
color: config('theme.colors.blue')
}
```
This PR removes the `config()` function in favor of a new `theme()` function that is already scoped to the `theme` section of the config:
```css
.foo {
color: theme('colors.blue')
}
```
I can't think of any reason at all why you would need to access the non-theme values in your config from your CSS (like enabled variants, or your list of plugins), and the word `theme` is much more expressive than `config`, so I think this is a worthwhile change.