font variable about tailwindcss-theming HOT 4 CLOSED

Hi, no. I plan on adding variable support. I'm not sure how to implement that yet, but my goal is to create a CSS properties integration with Tailwind.

from tailwindcss-theming.

In the meantime, you can still do it manually. You'd have to add a --font-title: Raleway, "Open Sans", Roboto; variable to any theme class (:root for instance), and add the following Tailwind config:

module.exports = {
  theme: {
    fontFamily: {
      title: ['var(--font-title)'],
    }
  },
};

from tailwindcss-theming.

I found the time to work on the custom properties features.

Now you can call .variable('font-title', ['Roboto', '"Segoe UI"', 'Arial']) on your theme to generate :theme-name { --font-title: Roboto,"Seoge UI",Arial } in it instead of manually having to write this variable in your CSS file.

I still have to work on tying this feature to Tailwind's configuration.

from tailwindcss-theming.

@muhajirdev Hey, I recently released v2.2.0 in which you can now properly have a font variable in your themes.

new Theme()
  .variable('title', [ 'Roboto', '"Segoe UI"' ], 'fontFamily');

The third argument is the name of the Tailwind's core plugin you want to extend. In this case, a variable which name will be --font-family-title will be generated and the Tailwind utility .font-title will be created as well. :)

It's a matter of time until I add a .font() and other aliases on the theme builder.

from tailwindcss-theming.