As I delve into the depths of the official Tailwind CSS documentation, I come across a valuable nugget of information:
Embrace w-screen to effortlessly extend an element to occupy the full expanse of the viewport.
Initially, w-screen proves handy as I begin to transpose this into practice:
width: 100vw;
However, I find myself at a crossroads when striving to bring to life:
width: 90vw;
height: 90vh;
Deciding the best approach to take will depend on whether the values are intended to be reused.
If there is a specific value, like 90vw, that you only need in one place and don't want to repeat, consider using an arbitrary value. For example:
<div class="w-[90vw] h-[90vh]"></div>
This will automatically generate the necessary classes for those styles.
If the styles are likely to be repeated or should be part of your design system, it's recommended to extend your Tailwind config instead:
// tailwind.config.js
module.exports = {
theme: {
extend: {
height: {
'screen/90': '90vh',
},
width: {
'screen/90': '90vw',
}
}
}
}
Then use it like this:
<div class="w-screen/90 h-screen/90"></div>
For situations like this, I've found it beneficial to develop a custom plugin.
Modify the Tailwind configuration by adding a plugin and default values.
const plugin = require('tailwindcss/plugin')
// define default values
const screenKeys = Array.from({length: 20}, (_, i) => i*5)
const screenSizes = screenKeys.reduce((v, key) => Object.assign(v, {[key]: key}), {});
module.exports = {
// ...
plugins: [
plugin(function ({matchUtilities, theme}) {
matchUtilities(
{
'w-screen': width => ({
width: `${width}vw`
})
},
{ values: Object.assign(screenSizes, theme('screenSize', {})) }
),
matchUtilities(
{
'h-screen': height => ({
height: `${height}vh`
})
},
{ values: Object.assign(screenSizes, theme('screenSize', {})) }
)
})
],
}
This setup enables you to utilize the w-screen or h-screen utility with vw or vh values ranging from 0 to 95 in increments of 5 (0,5,10...95). Using w-screen without specifying values will default to 100vw (as currently implemented).
<div class="w-screen h-screen-35">
The default width screen behavior remains unchanged
</div>
<div class="w-screen-50 h-screen-[15]">
50vw width, 15vh from Just-In-Time compilation
No need to specify h-screen-[15vh], as the units are already known to be in vh
</div>
In your scenario, it would be w-screen-90 h-screen-90
You can enhance the configuration for reusable classes using the screenSize key
module.exports = {
theme: {
extend: {
screenSize: {
33: 33 // just an example
}
},
},
}
Usage
<div class="w-screen-[22] h-screen-33">
33vh from user configuration, 22vw from Just-In-Time compilation
</div>
3.4 version changes
Introducing new size-* utilities that allow you to set width and height simultaneously.
For example, using size-10 will set both the width and height to 10.
Utilize Tailwind CSS utility classes to define the dimensions of an element based on a specific viewport width or height.
For instance, to establish an element's width as 90vw, employ the class w-90. Likewise, to set the height as 90vh, utilize the class h-90.
Therefore, in your particular scenario, apply the following classes:
w-90
h-90
I am looking to simplify the process of generating icons from svg-files while also creating a png-sprite fallback for IE8 support. I am using grunt.js and less. I was inspired by the implementation on 2gis.ru: (in Russian), where they used technologies s ...
I am currently working on an application that consists of two main parts: (X) an older AngularJs legacy application with its own set of CSS classes. (Y) a new React application contained within a div. This new part (Y) is built using webpack, postcss, and ...
My dilemma revolves around utilizing the Angular Material library for a drop-down navigation bar. The issue at hand is my desire to hover through the list, yet I am unable to tweak the style within HTML. Fortunately, I can easily make alterations in Chrome ...
My navigation bar is built using Bootstrap and contains multiple drop-down items. Now I have another div with the class of col-md-3. Within this div, I would like to display the items of the dropdown menu when hovered over. Currently, hovering over a dro ...
I've been researching the best way to style tables in my emails on the internet. From what I understand, CSS can be tricky when it comes to email formatting. So, when it comes to styling tables, is it better to use CSS or HTML? Should I opt for cod ...
I have a specific responsive layout that I need to achieve using a series of div tags. Below is the HTML structure I have: <div class="container"> <div>1</id> <div>2</id> <div>3</id> <div>4& ...
I’m attempting to incorporate a unique gradient into my next.js application with the help of Tailwind CSS and Daisy UI. Below is the specific code snippet I plan on using: background: linear-gradient(180deg, rgba(192, 192, 192, 0.04) 0%, rgba(201, 180, ...
I am currently working with R and Shiny, and I am attempting to display two dataTableOutput elements next to each other. To accomplish this, I am utilizing the fluidRow column feature, but I need to further customize the width of these two tables. Here is ...
I have been attempting to make the right floating menu scroll when overflowing, but so far, I have been unsuccessful. Here is the link to the JSFiddle demonstrating the issue: https://jsfiddle.net/xuwtqmj3/. .menu { position: fixed; float: right; ...
Let me illustrate the issue at hand. The black box/div covering the body text of the page is actually my website's main navigation (although with a light blue text color, it may be difficult to notice). Ideally, it should be positioned to the left of ...
I have been attempting to display two buttons, id="strength" and id="minion", when a certain button, id="expandButton", is clicked. I want these two buttons to be positioned on either side of the button that triggers their cre ...
I am having an issue with an element that changes to display absolute and covers its parent element on focus via javascript. However, when it goes back to its default state on blur, it does not return to its original position. This problem seems to only o ...
What's the best way to display the selected item after a user clicks on it? <Box py={2}> <Grid container width="330px"> <Grid container direction="column" item xs align="left"> ...
As a beginner developer, my expertise lies in HTML/CSS/JS and some fundamentals of their frameworks. Recently, I invested in this Template from template monster for a specific project () WHAT I NEED - My goal is to modify the primary theme color of the t ...
I am currently developing an option form where each selection will appear in a different color as the user scrolls down. Once a selection is made, it should be saved and displayed with the chosen color. https://i.sstatic.net/gvdpt.png My goal is to save ...
I'm looking for a CSS selector to target the first <tr> in a <table>. After searching online, I found some selectors like tr:first-child and table *:first-child tr:first-child, table tr:first-child. Unfortunately, these do not work in my ...
Exploring the world of React and MUI styled components for the first time. Currently, I'm delving into grid layouts and trying to style all children of a specific component. My goal is to target ${Item1}:nth-child(3n-1), ${Item2}:nth-child(3n-1), ${It ...
I have been struggling to find a solution to the problem, but nothing seems to be working. My goal is to create a gradient border for a slideshow on my website, similar to the one showcased in this video. I attempted to use the :before pseudo selector in m ...
Currently, I am utilizing telerik radwindow to showcase a PDF document. The window seems to be functioning correctly, but there is an issue with the alignment of the maximize and close icons. Ideally, they should appear in the same row, however, they are b ...
I am currently facing an issue with a CSS animation on my website that animates an arrow back and forth. The animation is working perfectly on all browsers except for Internet Explorer, where there seems to be a glitch causing the Y position of the arrow t ...