453adc6864
Hello, this PR updates the with-tailwindcss-emotion example to be compatible with tailwindcss 2.0 Here is a summary of all the changes: - update `.babelrc` config - update `README.md` - delete `@emotion/css component` (makes the example simpler) - update `@emotion/react` component to use xwind - update `@emotion/styled` component to use xwind - Add global styles to `_app.js` - remove `_document.js` page - remove `base.css` global style files (global styles are added in _app.js) - update `tailwind.config.js` - update `package.json` dependencies + remove unnecessary `build:base-css` script
43 lines
1.1 KiB
JavaScript
43 lines
1.1 KiB
JavaScript
/* Example with @emotion/react */
|
|
import xw, { cx } from 'xwind'
|
|
|
|
//"react native style"
|
|
const styles = {
|
|
button: xw`
|
|
relative
|
|
w-64 min-w-full
|
|
flex justify-center
|
|
py-2 px-4
|
|
border border-transparent
|
|
text-sm leading-5 font-medium
|
|
rounded-md
|
|
text-white
|
|
bg-gray-600
|
|
hover:bg-gray-500
|
|
focus[outline-none ring-4 ring-gray-400]
|
|
active:bg-gray-700
|
|
transition duration-150 ease-in-out
|
|
`,
|
|
}
|
|
|
|
const ButtonReact = ({ className, children, ...props }) => (
|
|
<button {...props} css={styles.button} className={cx('group', className)}>
|
|
{/* inline style*/}
|
|
<span css={xw`absolute left-0 inset-y-0 flex items-center pl-3`}>
|
|
<svg
|
|
css={xw`h-5 w-5 text-gray-500 group-hover:text-gray-400 transition ease-in-out duration-150`}
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
{children}
|
|
</button>
|
|
)
|
|
|
|
export default ButtonReact
|