将鼠标悬停在 Tailwindcss 中时如何增加文本输入宽度（带过渡）

Posted 2023-03-07

【中文标题】将鼠标悬停在 Tailwindcss 中时如何增加文本输入宽度（带过渡）

【英文标题】：How to increase text input width (with transition) when it is hovered in Tailwindcss

【发布时间】：2020-09-20 20:35:10

【问题描述】：

在tailwind.config.js 中添加hover 后，我能够更改文本的宽度

width: ['responsive', 'hover', 'focus'],
.
.
.
transitionProperty: ['responsive', 'hover', 'focus'],
transitionTimingFunction: ['responsive', 'hover', 'focus'],
transitionDuration: ['responsive', 'hover', 'focus'],
transitionDelay: ['responsive', 'hover', 'focus'],

但是动画效果很难看，我想添加一些过渡，但它似乎不起作用。这是 html 部分：

<input type="text" placeholder="Search" class="placeholder-gray-500 rounded-full px-3 pl-8 py-1 outline-none transition duration-700 ease-in-out focus:shadow-outline hover:w-64" />

小提琴示例： https://jsfiddle.net/codename2200/30wjcndm/9/

由于 jsfiddle 中没有顺风配置，我只是提取了样式（带有清除）来复制我到目前为止所拥有的内容。

【参考方案1】：

尺寸（高度、宽度）的转换不适用于“自动”值。您没有在此输入上设置任何宽度，因此它是默认的。因此，如果您有hover:w-64，那么您需要设置为 ex。 w-56.

您的代码的第二个问题是transition 类。默认情况下，它涵盖以下转换：background-color, border-color, color, fill, stroke, opacity, box-shadow, transformCheck docs。就像您看到的那样，没有“宽度”。因此，您可以在 tailwind 配置中更改它，或者直接使用 transition-all。

body 
  background: #DEDEDE;


/*-- Extracted from tailwindcss --*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in ios.
 */

html 
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */


/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body 
  margin: 0;


/**
 * Render the `main` element consistently in IE.
 */

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a 
  background-color: transparent;


/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

/**
 * Add the correct font size in all browsers.
 */

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img 
  border-style: none;


/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input 
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */


/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input  /* 1 */
  overflow: visible;


/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button  /* 1 */
  text-transform: none;


/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"] 
  -webkit-appearance: button;


/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner 
  border-style: none;
  padding: 0;


/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring 
  outline: 1px dotted ButtonText;


/**
 * Correct the padding in Firefox.
 */

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

/*
 * Add the correct display in all browsers.
 */

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

/**
 * Add the correct display in IE 10.
 */

/**
 * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
 * A thin layer on top of normalize.css that provides a starting point more
 * suitable for web applications.
 */

/**
 * Removes the default spacing and border for appropriate elements.
 */


h2,
h3 
  margin: 0;


button 
  background-color: transparent;
  background-image: none;
  padding: 0;


/**
 * Work around a Firefox/IE bug where the transparent `button` background
 * results in a loss of the default `button` focus styles.
 */

button:focus 
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;



ul 
  list-style: none;
  margin: 0;
  padding: 0;


/**
 * Tailwind custom reset styles
 */

/**
 * 1. Use the user's configured `sans` font-family (with Tailwind's default
 *    sans-serif font stack as a fallback) as a sane default.
 * 2. Use Tailwind's default "normal" line-height so the user isn't forced
 *    to override it to ensure consistency even when using the default theme.
 */

html 
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
  line-height: 1.5; /* 2 */


/**
 * 1. Prevent padding and border from affecting element width.
 *
 *    We used to set this in the html element and inherit from
 *    the parent element for everything else. This caused issues
 *    in shadow-dom-enhanced elements like <details> where the content
 *    is wrapped by a div with box-sizing set to `content-box`.
 *
 *    https://github.com/mozdevs/cs-s-remedy/issues/4
 *
 *
 * 2. Allow adding a border to an element by just adding a border-width.
 *
 *    By default, the way the browser specifies that an element should have no
 *    border is by setting it's border-style to `none` in the user-agent
 *    stylesheet.
 *
 *    In order to easily add borders to elements by just setting the `border-width`
 *    property, we change the default border-style for all elements to `solid`, and
 *    use border-width to hide them instead. This way our `border` utilities only
 *    need to set the `border-width` property instead of the entire `border`
 *    shorthand, making our border utilities much more straightforward to compose.
 *
 *    https://github.com/tailwindcss/tailwindcss/pull/116
 */

*,
::before,
::after 
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e2e8f0; /* 2 */


/*
 * Ensure horizontal rules are visible by default
 */

/**
 * Undo the `border-style: none` reset that Normalize applies to images so that
 * our `border-width` utilities have the expected effect.
 *
 * The Normalize reset is unnecessary for us since we default the border-width
 * to 0 on all elements.
 *
 * https://github.com/tailwindcss/tailwindcss/issues/362
 */

img 
  border-style: solid;


input::-moz-placeholder 
  color: #a0aec0;


input:-ms-input-placeholder 
  color: #a0aec0;


input::-ms-input-placeholder 
  color: #a0aec0;


input::placeholder 
  color: #a0aec0;


button 
  cursor: pointer;


table 
  border-collapse: collapse;



h2,
h3 
  font-size: inherit;
  font-weight: inherit;


/**
 * Reset links to optimize for opt-in styling instead of
 * opt-out.
 */

a 
  color: inherit;
  text-decoration: inherit;


/**
 * Reset form element properties that are easy to forget to
 * style explicitly so you don't inadvertently introduce
 * styles that deviate from your design system. These styles
 * supplement a partial reset that is already applied by
 * normalize.css.
 */

button,
input 
  padding: 0;
  line-height: inherit;
  color: inherit;


/**
 * Use the configured 'mono' font family for elements that
 * are expected to be rendered with a monospace font, falling
 * back to the system monospace stack if there is no configured
 * 'mono' font family.
 */

/**
 * Make replaced elements `display: block` by default as that's
 * the behavior you want almost all of the time. Inspired by
 * CSS Remedy, with `svg` added as well.
 *
 * https://github.com/mozdevs/cs-s-remedy/issues/14
 */

img 
  display: block;
  vertical-align: middle;


/**
 * Constrain images and videos to the parent width and preserve
 * their instrinsic aspect ratio.
 *
 * https://github.com/mozdevs/cs-s-remedy/issues/14
 */

img 
  max-width: 100%;
  height: auto;


.bg-white 
  --bg-opacity: 1;
  background-color: #fff;
  background-color: rgba(255, 255, 255, var(--bg-opacity));


.bg-custom-bgnormal 
  --bg-opacity: 1;
  background-color: #E7E7E7;
  background-color: rgba(231, 231, 231, var(--bg-opacity));


.bg-custom-dividerbg 
  --bg-opacity: 1;
  background-color: #F3F4F6;
  background-color: rgba(243, 244, 246, var(--bg-opacity));


.hover\:bg-gray-600:hover 
  --bg-opacity: 1;
  background-color: #718096;
  background-color: rgba(113, 128, 150, var(--bg-opacity));


.border-gray-400 
  --border-opacity: 1;
  border-color: #cbd5e0;
  border-color: rgba(203, 213, 224, var(--border-opacity));


.rounded-full 
  border-radius: 9999px;


.border-b 
  border-bottom-width: 1px;


.flex 
  display: flex;


.table 
  display: table;


.flex-col 
  flex-direction: column;


.items-center 
  align-items: center;


.justify-between 
  justify-content: space-between;


.flex-1 
  flex: 1 1 0%;


.flex-none 
  flex: none;


.font-semibold 
  font-weight: 600;


.h-16 
  height: 4rem;


.h-auto 
  height: auto;


.h-screen 
  height: 100vh;


.text-xs 
  font-size: 0.75rem;


.text-sm 
  font-size: 0.875rem;


.text-xl 
  font-size: 1.25rem;


.leading-7 
  line-height: 1.75rem;


.mx-4 
  margin-left: 1rem;
  margin-right: 1rem;


.mt-2 
  margin-top: 0.5rem;


.ml-2 
  margin-left: 0.5rem;


.mt-4 
  margin-top: 1rem;


.ml-4 
  margin-left: 1rem;


.mt-6 
  margin-top: 1.5rem;


.outline-none 
  outline: 0;


.focus\:outline-none:focus 
  outline: 0;


.overflow-y-auto 
  overflow-y: auto;


.overflow-y-hidden 
  overflow-y: hidden;


.py-1 
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;


.py-2 
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;


.px-2 
  padding-left: 0.5rem;
  padding-right: 0.5rem;


.px-3 
  padding-left: 0.75rem;
  padding-right: 0.75rem;


.px-4 
  padding-left: 1rem;
  padding-right: 1rem;


.px-5 
  padding-left: 1.25rem;
  padding-right: 1.25rem;


.pt-1 
  padding-top: 0.25rem;


.pl-2 
  padding-left: 0.5rem;


.pl-8 
  padding-left: 2rem;


.pb-10 
  padding-bottom: 2.5rem;


.placeholder-gray-500::-moz-placeholder 
  --placeholder-opacity: 1;
  color: #a0aec0;
  color: rgba(160, 174, 192, var(--placeholder-opacity));


.placeholder-gray-500:-ms-input-placeholder 
  --placeholder-opacity: 1;
  color: #a0aec0;
  color: rgba(160, 174, 192, var(--placeholder-opacity));


.placeholder-gray-500::-ms-input-placeholder 
  --placeholder-opacity: 1;
  color: #a0aec0;
  color: rgba(160, 174, 192, var(--placeholder-opacity));


.placeholder-gray-500::placeholder 
  --placeholder-opacity: 1;
  color: #a0aec0;
  color: rgba(160, 174, 192, var(--placeholder-opacity));


.absolute 
  position: absolute;


.relative 
  position: relative;


.top-0 
  top: 0;


.focus\:shadow-outline:focus 
  box-shadow: 0 0 0 3px rgba(255,153,51,0.5);


.fill-current 
  fill: currentColor;


.text-left 
  text-align: left;


.text-center 
  text-align: center;


.text-custom-txtnormal 
  --text-opacity: 1;
  color: #5B5E65;
  color: rgba(91, 94, 101, var(--text-opacity));


.text-custom-iconnormal 
  --text-opacity: 1;
  color: #A0A7AD;
  color: rgba(160, 167, 173, var(--text-opacity));


.text-gray-600 
  --text-opacity: 1;
  color: #718096;
  color: rgba(113, 128, 150, var(--text-opacity));


.hover\:text-white:hover 
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity));


.hover\:text-orange-600:hover 
  --text-opacity: 1;
  color: #dd6b20;
  color: rgba(221, 107, 32, var(--text-opacity));


.hover\:text-orange-800:hover 
  --text-opacity: 1;
  color: #9c4221;
  color: rgba(156, 66, 33, var(--text-opacity));


.group:hover .group-hover\:text-gray-800 
  --text-opacity: 1;
  color: #2d3748;
  color: rgba(45, 55, 72, var(--text-opacity));


.group:hover .group-hover\:text-orange-400 
  --text-opacity: 1;
  color: #f6ad55;
  color: rgba(246, 173, 85, var(--text-opacity));


.group:hover .group-hover\:text-orange-800 
  --text-opacity: 1;
  color: #9c4221;
  color: rgba(156, 66, 33, var(--text-opacity));


.uppercase 
  text-transform: uppercase;


.hover\:underline:hover 
  text-decoration: underline;


.tracking-wide 
  letter-spacing: 0.025em;


.truncate 
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;


.w-4 
  width: 1rem;


.w-48 
  width: 12rem;


.w-auto 
  width: auto;


.w-full 
  width: 100%;


.hover\:w-64:hover 
  width: 16rem;


.transition 
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;


.ease-in-out 
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);


.duration-200 
  transition-duration: 200ms;


.duration-700 
  transition-duration: 700ms;


.sidebar-spotify::-webkit-scrollbar
  width: 8px;
  background-color: #f5f5f5;


.sidebar-spotify::-webkit-scrollbar-thumb 
  border-radius: 8px;
  background-color: #c98a00;


.content-spotify::-webkit-scrollbar 
  width: 8px;
  background-color: #f5f5f5;


.content-spotify::-webkit-scrollbar-thumb 
  border-radius: 8px;
  background-color: #c98a00;


.sidebar-active 
  --border-opacity: 1;
  border-color: #dd6b20;
  border-color: rgba(221, 107, 32, var(--border-opacity));
  border-left-width: 4px;


.sidebar-active a 
  --text-opacity: 1;
  color: #7b341e;
  color: rgba(123, 52, 30, var(--text-opacity));


.sidebar-active i 
  --text-opacity: 1;
  color: #dd6b20;
  color: rgba(221, 107, 32, var(--text-opacity));


.sidebar li:not(.logo) 
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);


.sidebar li:hover:not(.logo) 
  border-left-width: 4px;
  --border-opacity: 1;
  border-color: #dd6b20;
  border-color: rgba(221, 107, 32, var(--border-opacity));

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<input type="text" placeholder="Search" class="placeholder-gray-500 w-56 rounded-full px-3 pl-8 py-1 outline-none transition-all duration-700 ease-in-out focus:shadow-outline hover:w-64 hover:w-64"/>