In my React app I'm using:
In order to use tailwindcss with Parcel I'm using PostCSS. Configuration requires 3 steps:
-
Create
tailwind.config.jsandpostcss.config.jsfiles
// postcss.config.js module.exports = { plugins: [ require('tailwindcss')('./tailwind.config.js') ] } // tailwind.config.js // This is only necessary if you want to modify tailwindcss module.exports = {} -
Create an
app.pcssfile
@tailwind base; @tailwind components; @tailwind utilities; -
Link the PostCSS file to the
index.htmlfile
<head> <link rel="stylesheet" href="app.pcss"> </head>
In the app itself I'm using the Reach UI Tooltip element:
// import the component and its default styles
import Tooltip from '@reach/tooltip'
import "@reach/tooltip/styles.css"
return (
<Tooltip
label='Edit'
>
<button className='py-1 px-3 rounded bg-transparent border border-blue-500'>
<span aria-hidden>✏️</span>
</button>
</Tooltip>
)
By default the tooltip looks like this:
To override the default styles of the tooltip element, I add a new block to the app.pcss file targetting the [data-reach-tooltip] selector and using the !important rule at the end of the @apply line.
[data-reach-tooltip] {
@apply bg-gray-800 text-white py-2 px-4 border-none !important;
}
Now the tooltip looks like this:
And thats it! Thank you for reading. I'll do my best to answer any questions you may have.
Top comments (0)