Giter VIP home page Giter VIP logo

Comments (5)

wikipeter avatar wikipeter commented on June 28, 2024 9

Just resolved my issue by providing a closure with string interpolation for the fontFamily reference.

I turned this:

h1: {
  fontFamily: theme('fontFamily.display'),
  color: theme('colors.turquoise.500'),
},

into this:

h1: {
  fontFamily: `${theme('fontFamily.display')}`,
  color: theme('colors.turquoise.500'),
},

which results in:

.prose h1 {
  color: #1a202c;
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
  font-family: "Open Sans Condensed",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

from tailwindcss-typography.

ahaseeb04 avatar ahaseeb04 commented on June 28, 2024 1

You can already do this:

module.exports = {
    theme: {
        typography: (theme) => ({
            // ...
        })
    }
}

from tailwindcss-typography.

adamwathan avatar adamwathan commented on June 28, 2024

Yep @ahaseeb04 nailed it 👍 Works just like anything else in Tailwind in this regard:

https://tailwindcss.com/docs/theme#referencing-other-values

from tailwindcss-typography.

wikipeter avatar wikipeter commented on June 28, 2024

Can confirm this

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  purge: [],
  theme: {
    extend: {
      colors: {
        turquoise: {
          100: "#ecf6f7",
          200: "#d9eeef",
          300: "#c6e5e8",
          400: "#b3dde0",
          500: "#a0d4d8",
          600: "#80aaad",
          700: "#607f82",
          800: "#405556",
          900: "#202a2b"
        },
      },
      fontFamily: {
        'display': [
          '"Open Sans Condensed"',
          ...defaultTheme.fontFamily.sans
         ],
        'body': ['Merriweather', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif']
      },
    },
    typography: theme => ({
      default: {
        css: [
          {
            h1: {
              fontFamily: theme('fontFamily.display'),
              color: theme('colors.turquoise.500'),
            },
            h2: {
              fontFamily: theme('fontFamily.body'),
              color: theme('colors.turquoise.500'),
            },
            h3: {
              fontFamily: theme('fontFamily.sans'),
              color: theme('colors.turquoise.500'),
            }
          }
        ]
      }
    })
  },
}

works for colors,

but not for fontFamily, as I end up with the following

.prose h1 {
  color: #a0d4d8;
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
  font-family: "Open Sans Condensed";
  font-family: system-ui;
  font-family: -apple-system;
  font-family: BlinkMacSystemFont;
  font-family: "Segoe UI";
  font-family: Roboto;
  font-family: "Helvetica Neue";
  font-family: Arial;
  font-family: "Noto Sans";
  font-family: sans-serif;
  font-family: "Apple Color Emoji";
  font-family: "Segoe UI Emoji";
  font-family: "Segoe UI Symbol";
  font-family: "Noto Color Emoji";
}

.prose h2 {
  color: #a0d4d8;
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
  font-family: Merriweather;
  font-family: Georgia;
  font-family: Cambria;
  font-family: "Times New Roman";
  font-family: Times;
  font-family: serif;
}

.prose h3 {
  color: #a0d4d8;
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
  font-family: system-ui;
  font-family: -apple-system;
  font-family: BlinkMacSystemFont;
  font-family: "Segoe UI";
  font-family: Roboto;
  font-family: "Helvetica Neue";
  font-family: Arial;
  font-family: "Noto Sans";
  font-family: sans-serif;
  font-family: "Apple Color Emoji";
  font-family: "Segoe UI Emoji";
  font-family: "Segoe UI Symbol";
  font-family: "Noto Color Emoji";
}

from tailwindcss-typography.

klickreflex avatar klickreflex commented on June 28, 2024

Thank you guys for the quick help ❤️

from tailwindcss-typography.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.