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.
Related
In a new project I get the strange behavior where everything works as intended, except for Outline and related: https://tailwindcss.com/docs/outline-style
The error received:
The outline class does not exist. If you're sure that outline
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 in an #apply for a component eg:
.button {
#apply bg-primary hover:bg-secondary;
}
.primary {
#apply border-2 md:border-none border-primary md:border-transparent;
}
Yet this does not work:
.outline {
#apply outline outline-2 outline-offset-2 focus:outline-yellow-500;
}
To ensure this is in the same import tree, these are applied in the index.css as part of the components layer:
#layer components {
...
}
Any insights into this will be highly appreciated, as none of the references (tailwind documentation, nor their repo bugs, addresses this issue in a workable manner, each example found points to user error. Which may just be the case here, but I am yet to find the issue.
You can't apply a class to itself. outline is already defined (one of the default tailwind classes), you are trying to define and apply it again.
See the error: https://play.tailwindcss.com/cdQLeYFcNH?file=css
Error
<css input>: Circular dependency detected when using: #apply outline
Use a different custom class. Like .custom-outline: https://play.tailwindcss.com/qo8M6Zkj31
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 }
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.
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
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.