Mark Lawlor @mark__lawlor

nativewind.dev Brisbane, Australia Joined March 2009

Tweets

426
Followers

2K
Following

178
Likes

104

Mark Lawlor @mark__lawlor

10 months ago

@hackerswagger @Baconbrix You can read the StyleX docs to understand why are they are not compatible stylexjs.com/docs/learn/thi… Thinking in StyleX requires you to drop CSS fundamentals such as specificity and selectors. StyleX compiles to CSS, but you cannot take general CSS and turn it into StyleX

1 0 3 147 0

View Details

Mark Lawlor @mark__lawlor

a year ago

@one__js @expo @zetavg WIP PR github.com/expo/expo/pull…

0 0 3 195 0

View Details

gluestack @gluestack

2 years ago

🎉Stable Release: NativeWind v4.1 Support is Here! 🚀 ✅ 90% smaller CSS 📂 ✅ 600+ lines & wrappers removed ✂️ ✅ Data attributes without HOCs 🔧 ✅ Expo RSC compatible ⚒️

6 18 123 10K 30

View Details

Mark Lawlor @mark__lawlor

2 years ago

@pzoltowski @DanStepanov NativeWind both a compiler & a runtime, but we see the runtime as a polyfill that hopefully will be eventually removed. I'll chat to @jpudysz after unistyles v3 stabilises about a possible integration. Multiple integrations have always been our long term plan

0 0 9 251 1

View Details

Mark Lawlor @mark__lawlor

2 years ago

Ok, time to get started...👷🚧👷

Adam Wathan @adamwathan

2 years ago

✨ Just published Tailwind CSS v4.0-beta.1! ⚡ Up to 5x faster builds, 100x faster rebuilds 🧰 Built-in imports, vendor prefixing, and more 🪄 Simplified, CSS-first configuration 🦾 Modern CSS features like @starting-style and container queries 🎨 New wide-gamut color palette

102 458 3K 249K 420

10 1 73 6K 2

View Details

Mark Lawlor @mark__lawlor

2 years ago

@kouradev @nativewindcss @expo You are free to update to the SDK 52 beta. You may just need a warning in your builds that NativeWind was forcefully cancelled.

0 0 2 114 0

View Details

Mark Lawlor @mark__lawlor

2 years ago

Great example of expo-router/ui 😍 Default<Tabs /> are great, but don't fit all use cases. The new "headless" tabs gives you the power design tabs that work best for your app

Jacob Clausen @entiendoNULL

2 years ago

Had a lot of fun tonight experimenting with the new expo-router/ui in @expo SDK52 to build a custom tab navigator. Really elegant, powerful stuff, and so straightforward to use 😎 If you haven't already, gotta give it a look!

6 0 49 26K 19

1 2 32 6K 8

View Details

onlydans @DanStepanov

2 years ago

A few updates 1⃣ I have joined NativeWind as a maintainer 2⃣ @mark__lawlor and I have a "stable" version of NativeWind v4 that we're testing with a small audience, comment/DM if you're interested in early access 3⃣ We'll release this new version by mid-late July Overview Fix the unstable development server NativeWind had some issues with applying styles and handling animations due to dependencies on external tools (Tailwind CLI and Reanimated). The implementation of these tools had some bugs and timing issues with FastRefresh, causing styles not to apply immediately and animations to be unstable. The solution for the Tailwind CLI issues was to add virtual module support to Metro and the solution for the Reanimated was to update the minimum version required and to remove some hacky code. Context NativeWind relies on Tailwind CLI to generate styles. It takes the output from Tailwind CLI and injects it into your app. However, due to some timing issues with FastRefresh (the thing that reloads your app quickly during development), the styles might not apply until you manually reload your app.

30 17 210 15K 17

View Details

Mark Lawlor @mark__lawlor

2 years ago

@natebirdman @andrioid @jamonholmgren I was referring to the web where CSS-in-js is starting to trend downwards 2023.stateofcss.com/en-US/css-in-j…

1 0 2 257 0

View Details

Mark Lawlor @mark__lawlor

2 years ago

@jullerino @Baconbrix @Meta RSD implements a new layer of style inheritance github.com/facebook/react… So if you use `cssInterop(html.div)`, then the styles should cascade

0 0 7 302 0

View Details

Mark Lawlor @mark__lawlor

2 years ago

We'll flesh out documentation for this👍This isn't a new issue, its the same specificity issue that Next.js users may encounter. Tailwind-to-stylex is a great alternative to twnrc. If you only use a subset of Tailwind CSS, this could be a great fit

Naman @naman34

2 years ago

Using Tailwind would break some of the styles in RN. Tailwind-to-stylex can help! npmjs.com/package/tailwi…

3 1 10 6K 4

1 0 14 4K 1

View Details

Mark Lawlor @mark__lawlor

2 years ago

There's actually a lot to process with "react-strict-dom" 🤯 I'm going to be focusing on releasing v4, but afterwards I'll improve the strict-dom support (e.g removing unneeded polyfills)

2 0 19 1K 2

View Details

Mark Lawlor @mark__lawlor

2 years ago

NativeWind looks🔥with "react-strict-dom"

Evan Bacon 🥓 @Baconbrix

2 years ago

🚀 This is universal React with the new "react-strict-dom" by @Meta (experimental): ◆ Light-weight, web-first API ◆ Truly native components on each platform ◆ No div-soup on web ◆ Fully accessible/indexable primitives ◆ Can be used with Tailwind CSS

38 163 1K 286K 337

3 0 72 8K 7

View Details

Mark Lawlor @mark__lawlor

2 years ago

@zReluxTV View is too legacy to override it with View2 I think the jsx namespace is a simply enough solution and I'd rather see a namespace than have to scan the imports() of every file

0 0 1 224 0

View Details

Mark Lawlor @mark__lawlor

2 years ago

Bikeshedding on the name: <native.div /> would have been nice, or even just <react.div />. I do think 'html' is going to turn away unaware developers

Evan Bacon 🥓 @Baconbrix

2 years ago

38 163 1K 286K 337

4 1 36 6K 3

View Details

Mark Lawlor @mark__lawlor

2 years ago

@fernandorojo Yes to both. Style & metadata are stored in a Map() where the className is the key. A className can have multiple styles. The Map() is generated at build time from CSS file. Metadata has info like, this needs to be animated, this needs event handlers, this inherits variable, etc

0 0 1 180 0

View Details

Mark Lawlor @mark__lawlor

2 years ago

There's a subtle difference between this example and the NativeWind className one. If there is a 3rd party library you like but you wish it was animated - just pass it the animated className. This inversion of control allows NativeWind's styling to be very flexible

Fernando Rojo @fernandorojo

2 years ago

@Baconbrix for a mix of simple API + full control, you can also use MotiPressable:

1 0 23 6K 4

1 0 22 4K 2

View Details

Mark Lawlor @mark__lawlor

2 years ago

@Antonwester5 @Baconbrix I wasn't trying to get you to switch. Tamagui=component library NativeWind=styling library It's an apples/orange comparison. You asked how does it do things differently, I was just trying to demonstrate that there are differences.