Can we have something like calc(100vh - *rem) by default?

[marco-carvalho]

I created some projects that I only needed to customize because I need this feature and I wished it existed by default because I could use something like CDN. Something like "h-screen-16" that would translate to "calc(100vh - 4rem)". Is this a bad idea for the project and I'm creating this layout with Tailwind in some bad way?

[1sd15]

Hmm. You can do this easily via the Config and then use the built CSS as a CDN? If you have the ability to host a file that is.

Here is a quick mock plugin for the classes you want (not tested):

const plugin = require("tailwindcss/plugin");

module.exports = {
  theme: {},
  variants: {},
  plugins: [
    ...
    plugin(function({ addUtilities, variants, config }) {
      // Get Theme Settings
      const utilitiesSpacing = config('theme.spacing');

      // Empty Object for Appending To
      var newUtilities = {};

      // Loop Over Spacing
      for (let [key, value] of Object.entries(utilitiesSpacing)) {
        newUtilities[`h-screen-${key}`] = {'height': `calc(100vh - ${value});`};
      }

      // Add Object
      addUtilities(newUtilities, variants('screenHeightSpacingAddon'))
    });
  ]
};

Hopefully this helps!

[marco-carvalho]

This would work, but the problem is that in some projects we can't build it and we use external CDN like cdnjs.com. My main point was if we can add this kind of feature by default to the main project. IDK if it is just me, but I use this kind of feature alot. And I even noticed that the TailwindCSS main page use this. 😄

[1sd15]

Hmm I see your point but VH can be a little iffy on Safari and Mobile Screens. It doesn't take in account for the top and bottom bars of the screen. You could just host the built file and include it remotely that way? :)

[1sd15]

I think you can use a Github GIST to host the Built File - https://gist.github.com/

[marco-carvalho]

@1sd15 we could host the build somewhere and used it, but if a new TailwindCSS version comes out, we always need to remember to build it again and deploy the build somewhere so we can use it... while I was wondering about that, I thought: "maybe someone is having this same issue, it would be nice if this feature was default in the project, so we don't need to do this every time TailwindCSS generate a new version"