text-border (based on text-shadow) #8598
Replies: 10 comments 7 replies
-
|
Hi @silveltman, Cool idea! Maybe it will be a feature at some point, but if you want to try it sooner I put together a plugin that will do this. You can start with The plugin code is below, and you can also play with it here: https://play.tailwindcss.com/PN21K8yytB?file=config const plugin = require('tailwindcss/plugin')
const flattenColorPalette = require('tailwindcss/src/util/flattenColorPalette')
const toColorValue = require('tailwindcss/src/util/toColorValue')
module.exports = {
plugins: [
plugin(function ({ matchUtilities, e, config, theme }) {
const textBorderSize = `--tw${config('prefix')}-text-border-size`
matchUtilities(
{
'text-border': (value) => ({
'text-shadow': `0 0 var(${textBorderSize},1px) ${toColorValue(value)}`,
}),
},
{
values: (({ DEFAULT: _, ...colors }) => colors)(flattenColorPalette(theme('borderColor'))),
type: 'color',
}
)
matchUtilities(
{
'text-border-size': (value) => ({
[textBorderSize]: value
}),
},
{ values: theme('borderWidth') }
)
}),
],
} |
Beta Was this translation helpful? Give feedback.
-
|
Wow thats fast, awesome! In the meantime I've been working on some custom utilities myself which got me to some things that can be applied in this plugin. Some of the custom utilities I made: I think the way text shadow is defined here is definitly better, since it does not have a blur and therefore looks more like a border. In the places where it says '1px' it should still be able to accept the text-border-size (maybe remove the word 'size' here? so it's more like a regular border) That line would probably look something like this? Another thing I like about my approach is using @supports, because the -webkit-text-stroke makes a border that just looks way better when supported. Also, this makes it possible to use text-transparent, which can't be used with text-shadow because this shadow fills the whole text. Tho this might be a bit dangerous, since people are probably developing in a webkit browser... On the other hand, caniuse seems say the support is quiet big. Any thoughts on this part? |
Beta Was this translation helpful? Give feedback.
-
|
This way of applying the text-shadow is probably even better since it has borders on all 4 sides: |
Beta Was this translation helpful? Give feedback.
-
|
Depending on the font |
Beta Was this translation helpful? Give feedback.
-
|
@silveltman maybe try your hand at a custom plugin based on some ideas here. Your custom utilities are pretty close and using a plugin will help you get the colors populated automatically.
Yes! But instead of -1px you could do @crswll That setup looks a whole lot better applied as multiple borders using x/y offsets. (updated my example to properly import the util functions like yours) |
Beta Was this translation helpful? Give feedback.
-
|
I'm not positive that's 100% all right to use flattenColorPalette but I sneak it in for experiment stuff like this haha. |
Beta Was this translation helpful? Give feedback.
-
|
well hey, more readable for sure than copy/paste. 😂 |
Beta Was this translation helpful? Give feedback.
-
|
I think I've made something pretty solid. It behaves just like normal border would, with the classes 'text-border-[color]' and 'text-border-[width]' Would love to get some feedback! If everything seems ok I will publish it to npm. Tailwind play: https://play.tailwindcss.com/zItN8mIHT3?file=config |
Beta Was this translation helpful? Give feedback.
-
|
Well done! Looks awesome. 👍 |
Beta Was this translation helpful? Give feedback.
-
|
I've tried to publish the plugin, but I come a cross some problems. Creating plugins, or npm packages even, is pretty new to me. It's here on npm: https://www.npmjs.com/package/tailwindcss-text-border my error: Can one of you guys help me out? When I get this to work I will publish a refactored version of this plugin for working with regular text-shadows, as mentioned in #162 |
Beta Was this translation helpful? Give feedback.
-
|
Not sure exactly what's up there, but I'd try this first. Instead of importing from So that would be: instead of: Also, you might want to define tailwind as a peer dependency. It may help to look over how some of the official plugins ([line-clamp for example(https://github.com/tailwindlabs/tailwindcss-line-clamp)] that are published on npm are setup to get an idea of how that all works. |
Beta Was this translation helpful? Give feedback.
-
|
New error this time :( |
Beta Was this translation helpful? Give feedback.
-
|
Hmm, ok. Give this a try... |
Beta Was this translation helpful? Give feedback.
-
|
That did the trick, thanks! However, it seems a bit wonky to me this way. Like it could break at any time haha |
Beta Was this translation helpful? Give feedback.
-
|
I don't think that one's part of the public API so it could break with a future tailwind update. |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, that's definitely a concern and why I wrote "I'm not positive that's 100% all right to use flattenColorPalette but I sneak it in for experiment stuff like this haha." I could have sworn I saw it in an official plugin but just looked around and didn't see anything. It's probably better to use what @rohmann originally had. |
Beta Was this translation helpful? Give feedback.
-
|
Not working well to me. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Something that is often used and not ussported by tailwind: text-borders! Or actually text-shadows without blur behind the scene.
Like having a 1px (or 2 or whatever) shadow around text that functions as a 1px border.
I think this is something that's used very often in designs and can be added without a lot of investigation work, because it can use the same rules/guidelines as for normal borders Just using 'text-border' instead of 'border'.
Beta Was this translation helpful? Give feedback.
All reactions