Tailwind - Links do not have the default cursor pointer on hover - tailwind-css

We use Tailwind CSS in our project. Any <a href*> tag should by default change the mouse pointer to cursor:pointer. In our normal HTML designs, this works fine, but when converted to ReactJS, all links display the normal cursor, and not the pointer.
So, I want to force the cursor:pointer to a-href elements in the Tailwind output style.css. I tried:
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
a {
#apply cursor-pointer;
}
}
That did not work. When inspecting any link element in chrome, I do not see cursor: pointer in the css for <a href*> tags.
This is weird because I fiddled in the tailwind playground and it worked, but not in my project:
https://play.tailwindcss.com/d3rpFZd6gM?file=css

Have you tried
#tailwind base;
#tailwind components;
#tailwind utilities;
a {
#apply cursor-pointer;
}

I was going crazy knowing that the tailwind playground was working and my project was not. So, I tailwind to the latest version and it worked like a charm.

Related

How to include #apply CSS code for reusing TailwindCSS styles with tailwindcss-rails?

I’m using tailwindcss-rails gem in Rails 7 project with asset pipeline. I need to reuse TailwindCSS styles, for example:
.pagy-nav {
#apply flex space-x-2;
}
I can put this code in app/assets/stylesheets/application.tailwind.css file and it works:
#tailwind base;
#tailwind components;
#tailwind utilities;
.pagy-nav {
#apply flex space-x-2;
}
However, I want to put the .pagy-nav code into a separate css file pagy.css (to be more clean/organised). Is there a way to do it?
This works since tailwindcss-rails v2.0.10 (tailwindcss v3.1.2):
https://github.com/tailwindlabs/tailwindcss/pull/8580
#import "./pagy_nav.css"; // import must come first, because `postcss-import` says so.
#tailwind base;
#tailwind components;
#tailwind utilities;
Or switch everything to import:
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
#import "./pagy_nav.css";

What is base in tailwind config used for?

I was wondering what could be configured in tailwind config file, I just can not grasp what could be configured in this file, specially the base part.
#tailwind base;
#tailwind components;
#tailwind utilities;
Could anybody elaborate this?
Using the #tailwind means to insert Tailwind’s directive. Tailwind supports these four directives base, components, utilities, and screens styles into your CSS.
Base injects Tailwind's base styles like inserting any layout
theme etc. Details use of the base
#layer base {
h1 {
#apply text-2xl;
}
h2 {
#apply text-xl;
}
}
Similarly, components work for extracting some classes like buttons.
You can go through all this for getting hints

Combine tailwindcss with CSS modules

I installed tailwindcss following this tutorial: https://tailwindcss.com/docs/guides/create-react-app (using Craco instead of postcss). After I included every code snippet and reloaded the webpage, all the default CSS styles were gone (h1, flex, etc.) Is it because I didn't configure tailwindcss with the whole project right or it's normal to have all the default styling rules deleted and you have to specify the base. By configuring I mean you just need to add:
#tailwind base;
#tailwind components;
#tailwind utilities;
in index.css file only, not every .css component file.
Tailwind Preflight removes all of the default margins from elements like headings, blockquotes, paragraphs, etc.
#tailwind base; /* Preflight will be injected here */
#tailwind components;
#tailwind utilities;
If you would like to stick with default values, then you can disable Preflight
// tailwind.config.js
module.exports = {
corePlugins: {
preflight: false,
}
}

TailwindCSS use #apply with placeholder color

I am trying to use #apply together with placeholder color in TailwindCSS, but for some reason, it does not seem to work although I am able to use #apply together with other properties. I am also able to use the placeholder color options as a CSS class. It just doesn't work with #apply.
#tailwind base;
input {
#apply placeholder-gray-900;
}
#tailwind components;
#tailwind utilities;
By trying this I end up with this error:
`#apply` cannot be used with `.placeholder-gray-900` because `.placeholder-gray-900` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.placeholder-gray-900` exists, make sure that any `#import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `#apply` can only be used for classes in the same CSS tree.
This is because the placeholder text is changed with a pseudo-selector, ::placeholder. If you look at the placeholder docs it's shown in light gray after each class definition.
As you can't #apply classes with a pseudo-selector, you'll need to add the pseudo-selector to your code, something like this (note you'll need to use the text color utilities here):
input::placeholder {
#apply text-gray-900;
}
For v2.1.4 ...
By default, the active variant is not enabled for any core plugins. Maybe its actual definition includes a pseudo-selector like :hover, :active, etc. You can control whether active variants are enabled for a plugin in the variants section of your tailwind.config.js file:
// tailwind.config.js
module.exports = {
// ...
variants: {
extend: {
backgroundColor: ['active'],
}
},
}
Read here for Tailwind - Hover, Focus, & Other States

Tailwind CSS how to code pixel perfect design

Just started to use https://tailwindcss.com
And can't figure out how to code pixel perfect design only with tailwind classes. Simple example, I need padding-left 22px but closest tailwind class is pl-6 and pl-8 which is 24px and 32px respectively. So at the end of the day, I have a bunch of tailwind classes + 1 custom where I make arrangements this defeats the purpose of this framework "utilities first".
Ok got it, I need to edit tailwind.config.js and set custom sizes there. For example:
height: [
...
'278px': '278px',
...
]
So now this size can be set with <div clas="h-278px">...</div>
Update:
After completed many projects on top of TailwindCSS I learned that it's not very optimal to set spacing/w/h... in tailwind config if it's used only once. It's better to go with the custom class you can always use #apply in that class anyway.
Update 2021:
As of tailwind version 2.1 we can enable JIT and use arbitrary styles like this:
mb-[278px]
You can try this for px and % styling -
w-[100px] or w-[50%]
Has mention by Mladen Janjetovic, you can also add new utilities to you tailwind setup.
The easiest way to add your own utilities to Tailwind is to simply add them to your CSS.
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer utilities {
.h-278 {
height: 278px;
}
}
So now this height can be set with
<div clas="h-278">...</div>
By using the #layer directive, Tailwind will automatically move those styles to the same place as #tailwind utilities to avoid unintended specificity issues.
Using the #layer directive will also instruct Tailwind to consider those styles for purging when purging the utilities layer.

Resources