Comments (18)
Implemented in v1.2.0.
from tailwindcss.
Reopened!
from tailwindcss.
Was just thinking this would be great to have baked in too. Like you say - best to keep things simple and reserve any utility classes to basic transitions like button hover states etc.
I've never really figured out if there's any performance downside to using the 'all' keyword when setting up css transitions e.g. transition: all 200ms ease. If not then initially it might make sense to make this the default transition property. If you assume that as a default then the two parts of the declaration left are duration and easing.
As far as easing goes it would probably be nice to be able to specify an easing type but in practise that might be kinda cumbersome (it would certainly increase the number of potential class names). If the basic use case is for buttons and other interactive elements I'd be happy with something like 'ease' which generally looks pretty good.
If that just leaves us with timing then I guess having something like the opacity property in the config file would probably work e.g.:
transition: {
'200': '200ms',
'400': '400ms',
'800': '800ms'
},
To output a class like: .transition-400
Or maybe go with a keyword based approach more like shadows, something like
transition: {
'fast': '200ms',
'medium': '400ms',
'slow': '800ms'
},
Then: .transition-fast
These are just initial thoughts - I've probably (or more likely definitely!) not considered all the angles but I agree that it would be great to see something like this in the framework
from tailwindcss.
I'd like to see easing in the config, even if it's simply to provide your easing method of choice as default.
Both should have a default
value too to allow a shorthand.
transitionDurations: {
default: 200,
'slow': 1000,
// ...
},
transitionTimingFunctions: {
default: 'linear',
'ease-in-out': 'ease-in-out',
// ...
},
Some example generated classes:
.transition (uses default for both)
.transition-200 (uses default timing function)
.transition-200-ease-in-out (everything specified)
Alternative idea: split easing and durations (.transition-200 .transition-ease-in-out
).This we could also add transitionProperties
config key so it isn't always all
. Don't know how useful this is though.
Final thought: transitionTimingFunctions
is the "correct" name for the setting. Might be better to use something friendlier.
from tailwindcss.
This is what I currently have in my custom utilities:
.trans {
transition: all .25s;
}
.trans-bg {
transition-property: background;
}
.trans-slow {
transition-duration: .5s;
}
.trans-slower {
transition-duration: .5s;
}
.trans-fast {
transition-duration: .15s;
}
.trans-faster {
transition-duration: .075s;
}
That way all of these work:
<div class="trans" /> <!-- Sane default -->
<div class="trans trans-bg" /> <!-- Background instead of all, must put .trans first -->
<div class="trans trans-fast" /> <!-- Transition quicker -->
I could also see doing something like:
*, :after, :before {
transition-duration: .25s;
transition-property: none;
}
.trans {
transition-property: all;
}
And then keep the rest the same (kind of how borders are currently set by tailwind). I'm not 100% sure if that would break lots of 3rd-party CSS, though.
Finally, I think that the timing functions should be their own classes:
.trans-linear {
transition-timing-function: linear;
}
/* etc */
from tailwindcss.
@louisjacksonrees planning to explore the API for this and the default values soon. In the mean time you can always install a plugin like this one:
https://github.com/benface/tailwindcss-transitions
Or simply write the classes yourself:
https://tailwindcss.com/docs/adding-new-utilities/
from tailwindcss.
I prefer the keyword based approach as well. As with the shadows, Tailwind makes some design decisions on how the shadow should look which is easy enough to customize. As with the shadow feature, it uses a default value as stated above. I think something like the below is just enough to be effective.
.transition (fast by default)
.transition-medium (or to be consistent, do we need to use 'md' like the shadow does?
.transition-slow
from tailwindcss.
I think the best way to implement this, is to do something similar like we did with the border
utilities.
from tailwindcss.
I like the keyword based approach you suggested.
from tailwindcss.
I'm currently using the slow
/md
/fast
convention in my project, but have also found it useful to have an instant
with duration set to 0. (None
would work too.)
from tailwindcss.
@niallobrien Why did you close this?
from tailwindcss.
That's strange...I didn't. 4 hours ago would've been 7am my time, just as I was getting up for work...
@adamwathan Should we reopen this or take it to the new discussion area I saw you mention on Twitter?
Thanks.
from tailwindcss.
I'd reopen as it is a feature request.
from tailwindcss.
What is the current process on this feature? Would it also be possible to add transition timings following the same convention as i.e. the border styles; border-solid
, border-dashed
but transition-ease
, transision-linear
instead?
Edit: referring to the transitionTimingFunctions mentioned by @sebastiandedeyne.
from tailwindcss.
@inxilpro Are those custom utilities just in a css file or is there a way to set them in tailwind.js and have them be generated?
from tailwindcss.
@rightaway Take a look at my tailwind plugin — they can be fully configured if you use the plugin, or else you can just copy-and-paste the above if you just want a quick-and-dirty solution.
from tailwindcss.
We can add common utilities which are not present in tailwind by default, in plugins section of tailwind.config.js as 'addUtilities' function.
https://tailwindcss.com/docs/plugins
from tailwindcss.
Will this be merged into the core project this is kind of make or break to be honest?
from tailwindcss.
Related Issues (20)
- Cannot read properties of null (reading '__isOptionsFunction') HOT 2
- [email protected] build time significantly exceeds previous versions for monorepo
- Tailwind Standalone Throwing Caniuse Browserlist Error When Running Without Tailwind CLI HOT 2
- PostCSS warning for custom utility used with before:/after: HOT 1
- [v4] "ring" doesn't show in Firefox HOT 1
- `supports` variant compiles function syntax incorrectly HOT 5
- Classes in an object aren't detected HOT 1
- v4: Bug with how the parser handles nested `quote_stack` and `bracket_stack` characters when in a string context HOT 2
- ERROR - Module not found - Can't resolve './${previewSrc}' HOT 2
- Giving error while installing tailwindcss
- tailwind css installed but not working in my webpack+ umi + react project
- TailwindCSS is using stderr to log the messages "Rebuilding..." and "Done in [x]ms"
- [v4] Chrome ~v103 chokes on comma in .bg-gradient-* Utility HOT 1
- PostCSS plugin not processing changes outside base directory HOT 3
- Tailwind does not delete unused css
- Cannot transition between outer and inner shadows
- Border is being overwritten despite appearing after the original border class
- tailwind-cli casually emits to `stderr` HOT 2
- [v4] Publish @tailwindcss/postcss as ESM HOT 1
- [v4] Sourcemaps not enabled in postcss plugin HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tailwindcss.