TailwindCSS and Wordpress – Styling plugin output - wordpress

I'm trying to figure out the best way of using TailwindCSS for WordPress theme development. I'm confused about the best way to style html output that you don't have easy control over like a plugin. Or for example a menu, how to style item states that WP provides useful classes to style like .current_page_item.
Previously I would typically dequeue plugin css and then add my own css rules applied using the css classes that the plugin outputs.
I was thinking I could do something similar using tailwinds #apply feature to apply a bunch of tailwind classes to an element using the plugins class name.
e.g.
.plugin-btn { #apply bg-blue-500 text-white font-bold py-2 px-4 rounded; }
or in the case of a menu:
.current_page_item { #apply text-red-500 hover:text-blue-500 }
This method seems a bit awkward with Tailwind v1.x as #apply didn't work with responsive class variants or pseudo class variants but v2 it seems #apply does work with these now.
Is this a good solution. What do other people do?

So if I understand you correctly, you tend to remove the styling of plugins & redo it your self? And the problem you have now is to create the responsive styling (using Tailwind CSS)?
If that's the case you could do something like:
// This would be the default style from a mobile-first perspective
.plugin-name {
#apply w-full;
}
// This would be the style from a MD perspective (I think iPad devices and up?)
#screen md {
.plugin-name {
#apply w-1/2;
}
}
When I need to add hover, focus etc I do it like:
When using SCSS:
.item-class-name {
#apply text-black ...;
&:hover {
#apply text-white bg-black;
}
}
When using CSS:
.item-class-name {
#apply text-black ...;
}
.item-class-name::hover {
#apply text-white bg-black;
}
I'm currently creating a (personal for now) starter theme which is built on TailWind CSS & AlpinejS, and using the laravel-mix setup.
This makes it easier to achieve something like:
// app.scss file in which I add the tailwind components
#tailwind base;
#tailwind components;
#tailwind utilities;
// Additional scss files are divided in components folder
#import './components';
// You could add a 'plugins' file like
#import './plugins';
// In the plugins file you would import all the plugin related styling files...if that makes sense.

Related

TailwindCSS #layer components being dropped when using documentation --minify command

Following the TailwindCSS documentation, i am trying to minify my final stylesheet to optimise it for production. However i am losing custom styles added via #layer components {} when minifying.
I have a simple .css file for my Tailwind set up containing the following code:
#layer components {
.button {
#apply text-white bg-neutral-900 inline-flex text-sm font-bold py-2 px-4 rounded-3xl md:px-9 md:py-2 border-2 border-neutral-900 transition-all;
}
}
When i compile (un-minified), i can use the .button selector on elements and this pulls through my styles as expected.
However, when i run npx tailwindcss -o ./dist/styles/tailwind.css --minify, the .button selector is no longer within my minified stylesheet.
Where am i going wrong here? I have tried adding the .button selector to my tailwind.config.js safelist, as well as adding my ./src/styles/tailwind.css (as "./src/styles/*.css) to my content array within my config file. Neither of these seem to resolve my issue.

Controlling the specificity of CSS Modules in a Next.js App

I'm trying to figure out a good workflow of how to use Tailwind together with CSS Modules in Next.js, but I'm running into some tricky problems regarding specificity and the order in which styles are inserted by Webpack.
Consider the following use case: I want to create a reusable Button component whose styles can be overridden with utility classes. Option 1 is to extract the component, as mentioned in the Tailwind Docs:
/* button.jsx */
export const Button = props => <button {...props} className={`btn {props.className}`} />
and in my tailwind.css file I'd add the classname in the #layer directive:
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer components {
.btn { #apply ... }
}
This is nice because I can override any of the buttons styles with utility classes, since they have higher specificity. However, I see a few minor problems here:
the class is now global, so it's included in every page even if I don't use the component
the style and component are no longer colocated - this might get messy if I create many such classes
Option 2 would be to use a CSS Module and apply the classes like this:
/* button.module.css */
.btn { #apply ...}
/* button.jsx */
import styles from "./button.module.css";
export const Button = props => <button {...props} className={`${styles.btn} {props.className}`} />
This way the CSS only gets loaded when the component is used, and the styles are colocated. Problem here is that in Next.js CSS Modules are inserted after global CSS, so they have higher specificity. Which totally makes sense, usually I'd want my CSS Modules to be able to override global styles. However, in this case I'd like them to be inserted before my global styles so that I can override them with utility classes.
I assume this should be possible by adjusting the Webpack config? Does anyone proficient with Webpack know how to achieve this?
I actually found a nice solution in tailwind v3.0, which is using the new important option. In your tailwind.config.js you can now add this line:
module.exports = {
// ...
important: '#__next'
}
This way, all your utilities are getting prefixed with #__next (the root element in Next.js), which increases their specificity above that of CSS Modules.
Go for the second option and simply add ! to the property to make that important.
/* button.module.css */
.btn { #apply !mb-0 }

Tailwind - css rule is invisible if I use layer

Do you have any ideas why #layer in Tailwind CSS doesn't work?
If I write in my styles.css for example
h1 {
#apply text-2xl;
}
it works but if I do:
#layer base {
h1 {
#apply text-2xl;
}
}
it doesn't. It just doesn't see this style.
I have got same error but i figured out from inspecting elements that inherited styles have been applied then i add some more styles to strong elements then mounted css styles have more precedence because of selectors and it worked..
#layer base {
h1 {
#apply text-green-600 font-bold text-4xl;
} strong {
#apply text-gray-800 font-extrabold text-2xl;
}
}
It's possible that your h1 style is getting purged by Tailwind's styler purging process: https://tailwindcss.com/docs/controlling-file-size:
Using the #layer directive will also instruct Tailwind to consider
those styles for purging when purging the layer.
Since, presumably, you're not referencing the h1 style with #apply, maybe Tailwind is considering the style unused. Although, one would hope that Tailwind would not purge a tag-based selector.
Take a look at the CSS file that is built, either on the file system or inspector in the browser, and look for your h1 styles.
From the Tailwind docs, maybe try adding h1 to your whitelist - although I don't think it will work since the whitelist seems to want class-based selectors.
// tailwind.config.js
module.exports = {
purge: {
content: ['./src/**/*.html'],
// These options are passed through directly to PurgeCSS
options: {
whitelist: ['bg-red-500', 'px-4'],
}
},
// ...
}
I recommend asking if tag selectors work with layers on the Tailwind Discord or forum: https://tailwindcss.com/community

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