Comments (1)
All good, this has bitten me before also!
The NextLink
component is a little weird, it doesn't apply styles in a way you'd assume.
The official way to style your links is like this:
import tw, { styled } from 'twin.macro'
import NextLink from 'next/link'
const MyLink = tw.a`px-4 py-2 text-sm font-medium text-white`
// or
// const MyLink = styled.a(tw`px-4 py-2 text-sm font-medium text-white`)
const Link = () => (
<NextLink href="/login" passHref>
<MyLink>Home</MyLink>
</NextLink>
)
from twin.examples.
Related Issues (20)
- Include 'styled-components/macro' in 'twin.macro' HOT 1
- TypeError: twin_macro__WEBPACK_IMPORTED_MODULE_2__.theme is not a function HOT 3
- Twin example for vite-emotion-typescript - trying to add babel-plugin-twin HOT 2
- Please provide instruction of how to setup Jest testing with twin HOT 3
- tw-elements doesn't work after update HOT 3
- [vite-emotion-typescript] Could not resolve "tailwindcss/stubs/defaultConfig.stub" HOT 3
- None of the nextjs example working anymore HOT 3
- Preact / Emotion / TypeScript example HOT 1
- SolidJS + typescript tw/css attribute type issues HOT 4
- This example causes next.js to fallback to Babel from SWC HOT 2
- Tailwind + Styled Components + SWC (TurboPack) + NextJs (no babel) HOT 1
- MacroError in project: NextJS+TypeScript
- It can run but why it will appear error ? HOT 1
- Getting error "twin.macro: Unexpected token, expected " using twin.macro and styled components with vite HOT 3
- NextJS@14 + Emotion
- Can't resolve 'styled-components/jsx-dev-runtime' HOT 1
- How to export a new font into it?
- Update tailwindcss to v3.0 HOT 1
- [next-stitches-typescript] `styled` is of type `any`
- Typescript types for component selectors that use object syntax in emotion
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 twin.examples.