"Utilize Tailwind's color division feature exclusively for dividing on the x

How can I make the divide-gray-600 utility only apply to divide-x? It appears that there is no specific divide-x-gray-600 option available. I am attempting to give the second item a red bottom border:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex items-stretch w-full divide-x divide-gray-600 text-center bg-gray-100">
  <div class="flex-1 border-b border-red-600 p-2">Red border bottom</div>
  <div class="flex-1 border-b border-red-600 p-2">Should have red border bottom</div>
  <div class="flex-1 border-b border-gray-600 p-2">Gray border bottom</div>
</div>

csstailwind-css

Answer №1

Exciting news! It seems like per-side border colors will soon be added to Tailwind for those using the JIT compilation mode. Unfortunately, as of now, these features are not available yet. But when they are released, you can easily resolve your issue by applying the border-b-red-600 class to the middle div. Just a heads up, this solution won't work if you're utilizing the CDN installation method.

UPDATE: Good news! Per-side border colors are now part of the latest TailwindCSS v2.2 update!

In the meantime, or if you're not using JIT, you have the option to create your own custom border-color utilities or utilize your individual divide utilities as demonstrated below:

.divide-x-gray-600 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-right-color: rgba(75,85,99,var(--tw-divide-opacity));
    border-left-color: rgba(75,85,99,var(--tw-divide-opacity));
}

This may not align perfectly with the typical Tailwind approach, but it should effectively meet your needs. If you prefer to stick with the Tailwind style, consider creating a plugin to automate the process for you. Remember, without JIT, this could result in a larger unpurged CSS file due to generating additional sets of utilities for each color.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you create HTML elements with a unique perspective?

To achieve a unique perspective when rendering HTML elements, we explored various methods. However, we found that CSS skew transformations did not produce the desired effect, often distorting the element's aspect ratio or creating unwelcome warping. ...

htmlcssmatrixperspective

How can I prevent zooming functions in a responsive design layout?

Is there a method to prevent zoom-in and zoom-out functionality on responsive design pages for iPad, iPhone, or other smartphones? Are there any techniques available to restrict this capability? ...

htmlcssresponsive-designmeta-tags

Displaying a Facebook tab exclusively within the Facebook platform

Hello Everyone I have been utilizing woobox to generate Facebook tabs for my pages and I have a query: I have created an HTML page on my personal server, which I am using as a Facebook tab (created with the help of woobox). Now, is there a method whe ...

phphtmlcssfacebook

Implement CSS styling on a single page by utilizing SCSS in conjunction with ReactJS and Redux

I'm currently working with ReactJS and Redux, utilizing SCSS for styling. Currently, my path is located at http://localhost:3000/login. I need to include the following on this page: html:{ overflow:hidden} However, on other pages, I want to remove th ...

csshtmlreactjssassredux

Styling with CSS to create a visual countdown display

I'm trying to replicate the format shown in the image below. https://i.sstatic.net/lnW2C.png Currently, this is the code I have: https://codepen.io/Brite1/pen/wvPrggj (it seems like I just need to adjust spacing and center all numbers/text). I'm ...

javascripthtmlcss

What are some creative ways to customize v-slot:cell templates?

Currently, I have the following code snippet within a table: <template v-slot:cell(checkbox)="row" style="border-left='5px dotted blue'"> <input type="checkbox" v-model="row.rowSelected" @input="toggleS ...

cssvue.jsbootstrap-vue

The primefaces codeMirror is failing to properly load its own CSS and JavaScript files

I am experiencing an issue with codeMirror from primeface-extension when trying to use it with SQL syntax. Upon loading the page that contains this component, I encounter a 404 error where the Css and javascript components cannot be found. Despite having ...

javascriptcssprimefacescodemirrorprimefaces-extensions

What is the best way to customize the color scheme of a Bootstrap 4 range slider?

https://i.sstatic.net/MBona.png Looking for suggestions on how to customize the colors of ranges in Bootstrap 4 and change the blue thumb color to 'gray'. Below is the example HTML input code: <p id="slider" class="range-field"> <in ...

cssbootstrap-4

Ways to display dynamic content within a div using Bootstrap's vertical tab through a click event in PHP

I have been working on displaying static content in a div using Bootstrap vertical tabs, similar to this: Link: However, I am facing an issue with showing dynamic content in a div using a Bootstrap vertical tab through a PHP click event. I have been try ...

phpjqueryhtmlcsstwitter-bootstrap

Do you know of a solution to fix the Stylelint error regarding semicolons when using CSS variables?

React.js Css in JS(Emotion) The components above are part of this setup. Here is the configuration for Stylelint: module.exports = { extends: [ "stylelint-config-standard", "./node_modules/prettier-stylelint/config.js", ], ...

javascriptcssreactjsstylelintscss-lint

I seem to be having an issue here - my style sheet just won't load

I am having an issue with my external style sheet named style.css. style.css #topbar { background-color: red; width: 1000px; height: 40px; } body{ background-color: green; } I have tried calling this style.css from the root folder, but it's not ...

htmlcss

The combination of Google Maps and CSS transforms causes a blur effect on the page

After implementing the CSS Transform technique to center a div both horizontally and vertically, the desired effect was achieved. However, an unexpected issue arose on pages that contained a Google Maps iframe causing the entire page to go blurry. To view ...

htmlcssgoogle-mapstransform

Simple Jquery image rotator generating two galleries side by side

Currently, I am encountering an issue where I am unable to configure the Jquery rotator from Easy Jquery Auto Image Rotator and script source Google jquery.min.js I attempted to give the second gallery a different class and duplicated the js script. ...

javascriptjqueryhtmlcss

What is the method for presenting text based on the chosen Select Option?

I attempted to achieve this using hrefs and ids, but it did not meet my requirements. This is the desired format: div.selectcountry { margin-bottom: 10px; font-family: arial; font-size: 12px; } div.countrydepartment { font-family: ...

javascriptjqueryhtmlcss

How to target the first and last elements of sequences with a specific class using CSS

My webpage contains numerous div elements with the class line, each containing a strong.datum element. I want to designate the first and last element of each sequence with the class .active. If this can't be achieved using CSS, is there a way to accom ...

jquerycsscss-selectors

Ensure that the width of the container holding two "text" input boxes is appropriately set when utilizing the display flex property

MRE: .outer-container { width: 80%; } .form-container { display: flex; } .form-container input[type=text] { width: 50%; height: 40px; } .form-container label { margin-right: 10px; } <p>Type in your text (let an AI finish it):</p ...

htmlcss

Display the div once the radio button has been selected

I have a similar issue to an existing question. The challenge I'm facing is displaying 40 divs without writing repetitive code for each one... Does anyone have any advice or suggestions on how to tackle this? Thank you in advance. :) ...

javascriptjqueryhtmlcssshow-hide

Tips for styling list tooltips with CSS and Bootstrap

I am looking to style my tooltips using CSS, specifically I want the background of the tooltips to be gray and the text to be bold. The issue is that I am unsure how to do this, especially since I have a list with multiple options, each option having its ...

javascripthtmlcssangularbootstrap-4

jQuery Side Panel with built-in back button support

I'm currently developing a portfolio website and I want to implement a feature where clicking on one of my projects will trigger a side panel to slide in from the right. The panel should cover 100% width and height of the viewport. I also want users t ...

jqueryajaxcss

What could be causing the issue with my Date and Time input not functioning correctly?

I developed a React frontend application styled with Material UI design. The issue I am facing is that after adding the Date and Time component styling to the form, it is unable to process the "name" value for posting. Specifically, the error message "Ty ...

cssreactjsmaterial-ui