GithubHelp home page GithubHelp logo

nativewind / nativewind Goto Github PK

View Code? Open in Web Editor NEW
4.5K 23.0 241.0 296.66 MB

React Native utility-first universal design system - powered by Tailwind CSS

Home Page: https://nativewind.dev

License: MIT License

JavaScript 5.62% TypeScript 70.65% HTML 0.01% SCSS 1.88% MDX 21.78% Shell 0.07%
react-native tailwindcss css react tailwind react-native-web nativewind

nativewind's Introduction

Tailwind CSS

NativeWind

GitHub branch checks state npm npm GitHub

NativeWind uses Tailwind CSS as high-level scripting language to create a universal design system. Styled components can be shared between all React Native platforms, using the best style engine for that platform (e.g. CSS StyleSheet or StyleSheet.create). It's goals are to to provide a consistent styling experience across all platforms, improving Developer UX, component performance and code maintainability.

NativeWind processes your styles during your application build, and uses a minimal runtime to selectively apply reactive styles (eg changes to device orientation, light dark mode).

In Action

Features

  • Works on all RN platforms, uses the best style system for each platform.
  • Uses the Tailwind CSS compiler
  • Styles are computed at build time
  • Small runtime keeps your components fast
  • Babel plugin for simple setup and improving intellisense support
  • Respects all tailwind.config.js settings, including themes, custom values, plugins
  • dark mode / arbitrary classes / media queries
  • pseudo classes - hover / focus / active on compatible components
  • styling based on parent state - automatically style children based upon parent pseudo classes
  • children styles - create simple layouts based upon parent class

Documentation

All documentation is on our website https://nativewind.dev

nativewind's People

Contributors

amandeepmittal avatar amorriscode avatar andrefelipeschulle avatar angeloanolin avatar arnaudambro avatar aviavinav avatar bidah avatar bingcoke avatar christianbauer1 avatar danscan avatar evanbacon avatar ferasaloudah avatar gabeconsalter avatar github-actions[bot] avatar infinitexyy avatar isaacwashere avatar jmeistrich avatar johnf avatar jsellam avatar marklawlor avatar nandorojo avatar renovate-bot avatar renovate[bot] avatar semantic-release-bot avatar sync avatar the-dijkstra avatar thefinnomenon avatar timedtext avatar viraj-10 avatar yjose avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

nativewind's Issues

Enhance RN style inheritance capability

RN Component has almost no style inheritance ability.
On the Web platform, there are many CSS properties that have the ability to inherit values from parent elements.

For example, implementing a button with an icon on RN platform.

<Pressable className="... text-white">
    <MailIcon className="text-white" />
    <Text className="text-white">Button text</Text>
</Pressable>

Need to set the font color on every child element, which is kind of annoying.
The approach I would like.

<Pressable className="... text-white">
    <MailIcon/>
    <Text>Button text</Text>
</Pressable>

This is actually the CSS behavior on the Web platform.
I see this library can implement Styling based on parent state, so I was wondering if this library could also enhance RN's inheritance ability.

[Bug]: Styled returns "Functions are not valid as a React child"

I can't seem to get styled or StyledComponent to work. They crash with this error in styled.js:

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

I tried this in my test Next.js project, with a repro here: https://github.com/jmeistrich/tailwindcss-react-native-next

I also tried following your install instructions in a fresh Expo app, doing the quickstart (https://tailwindcss-react-native.vercel.app/quick-start) then https://tailwindcss-react-native.vercel.app/api/styled. And it crashes with the same error.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

  • fix(deps): update dependency tamagui to v1.0.1-beta.179
  • fix(deps): update dependency reassure to v0.5.0
  • πŸ” Create all rate-limited PRs at once πŸ”

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

Detected dependencies

github-actions
.github/workflows/main.yml
  • actions/checkout v3
  • actions/setup-node v3
  • changesets/action v1
.github/workflows/pull-request.yml
  • actions/checkout v3
  • actions/setup-node v3
npm
apps/benchmarks/package.json
  • @eva-design/eva 2.1.1
  • @tamagui/babel-plugin 1.0.1-beta.178
  • @ui-kitten/components 5.1.2
  • chart.js 3.9.1
  • chartjs-chart-error-bars 3.9.2
  • dripsy 3.8.1
  • expo 46.0.13
  • jest 29.0.3
  • native-base 3.4.17
  • react-native 0.70.1
  • react-native-safe-area-context 4.3.4
  • reassure 0.4.1
  • tamagui 1.0.1-beta.178
  • ts-jest 29.0.2
  • twrnc 3.4.0
  • @babel/core 7.19.1
  • patch-package 6.4.7
apps/demo-compiler/package.json
  • @babel/plugin-syntax-jsx 7.18.6
  • @babel/preset-react 7.18.6
  • @babel/standalone 7.19.2
  • @swc/plugin-transform-imports 1.3.0
  • tailwindcss 3.1.8
  • vercel 28.4.2
apps/website/package.json
  • @babel/standalone 7.19.2
  • @codemirror/lang-javascript 6.1.0
  • @docusaurus/core 2.1.0
  • @docusaurus/preset-classic 2.1.0
  • @mdx-js/react 1.6.22
  • @uiw/codemirror-theme-dracula 4.12.3
  • @uiw/codemirror-theme-eclipse 4.12.3
  • @uiw/react-codemirror 4.12.3
  • chart.js 3.9.1
  • clsx 1.2.1
  • dedent 0.7.0
  • docusaurus-plugin-sass 0.2.2
  • lodash.debounce 4.0.8
  • prism-react-renderer 1.3.3
  • react 18.2.0
  • react-dom 18.2.0
  • react-chartjs-2 4.3.1
  • react-twitter-embed 4.0.4
  • sass 1.55.0
  • tailwindcss 3.1.8
  • unist-builder 2.0.3
  • unist-util-visit-parents 3.1.1
  • @types/babel__standalone 7.1.4
  • @types/lodash.debounce 4.0.7
package.json
  • @changesets/cli 2.24.4
  • @types/node ^18.7.23
  • eslint 8.24.0
  • eslint-config-prettier 8.5.0
  • eslint-plugin-unicorn 43.0.2
  • prettier 2.7.1
  • typescript 4.8.3
packages/nativewind/package.json
  • @babel/generator ^7.18.7
  • @babel/helper-module-imports 7.18.6
  • @babel/types 7.19.0
  • css-mediaquery ^0.1.2
  • css-to-react-native ^3.0.0
  • micromatch ^4.0.5
  • postcss ^8.4.12
  • postcss-calc ^8.2.4
  • postcss-color-functional-notation ^4.2.2
  • postcss-css-variables ^0.18.0
  • postcss-nested ^5.0.6
  • react-is ^18.1.0
  • use-sync-external-store ^1.1.0
  • @babel/core 7.19.1
  • @babel/plugin-syntax-jsx 7.18.6
  • @cspell/eslint-plugin 6.10.1
  • @testing-library/react-hooks 8.0.1
  • @testing-library/react-native 11.2.0
  • @types/css 0.0.33
  • @types/css-mediaquery 0.1.1
  • @types/css-to-react-native 3.0.0
  • @types/jest 29.0.3
  • @types/micromatch 4.0.2
  • @types/react 18.0.21
  • @types/react-is 17.0.3
  • @types/react-native 0.70.3
  • @types/use-sync-external-store 0.0.3
  • @typescript-eslint/eslint-plugin 5.38.1
  • @typescript-eslint/parser 5.38.1
  • babel-plugin-tester 10.1.0
  • jest 29.0.3
  • jest-environment-jsdom 29.0.3
  • metro-react-native-babel-preset 0.72.3
  • moti 0.19.0
  • react 18.2.0
  • react-dom 18.2.0
  • react-native 0.70.1
  • react-native-svg 13.2.0
  • react-native-web 0.18.9
  • react-test-renderer 18.2.0
  • tailwindcss 3.1.8
  • ts-jest 29.0.2
  • typescript 4.8.3
  • tailwindcss ~3
  • node >=14.18

  • Check this box to trigger a request for Renovate to run again on this repository

Component API

Would you consider creating a factory function / export components from this library rather than the Babel magic? That would make me much more likely to use it. If anything, the Babel plug-in could be an optional optimization that happens inside this library's components, although I would hope it isn't necessary.

I stayed away from Tamagui for the same reason. Requiring plugins makes debugging a bit of a black box with race conditions and forces me to rely a lot on a maintainer. I prefer to import things directly with predictable behavior.

If this isn't of interest to you, no worries! It's your project after all. But I think it could help increase adoption a lot (and perhaps simplify the code.) Curious to get your thoughts @marklawlor

ReferenceError: Property 'React' doesn't exist

Hello,

I followed the very simple instructions from the documentation but can't seem to get past this error.

Repro

const App: React.FC = () => {
  return (
    <TailwindProvider> // <-- can't get past this
      <SafeAreaProvider>
        <Provider store={store}>
          <PersistGate loading={null} persistor={persistor}>
            <Root />
          </PersistGate>
        </Provider>
      </SafeAreaProvider>
    </TailwindProvider>
  );
};

Any ideas? Would really love to be able to use this library, thank you!

Running on:

[email protected]
[email protected]/1.5.0@next  // <--tried both

Usage on Windows

I'm currently investigating issues with the Babel plugin not working as expected on Windows system. This affects both the Babel transform and compilation.

If you are affected by this issue, you can still use the library either by compiling with Tailwind CLI or PostCSS CLI.

[Tests] 100% Tailwindcss coverage

The initial version of this library simply turned off core tailwindcss plugins only enabled ones could compile "as-is" to React Native. This approach was a bit naive and we should be able to more core plugins through a combination of (in order of preference)

  • Better base theme
  • Post processing styles
  • Custom plugins.

This is a little bit of tedious task, but we should be able to write a until test for each Tailwind style to ensure maximum compatibility.

This is a todo list that each section of the tailwind website has both a unit test and an entry in the compatibility document.

This is not a list of what works, rather what has been unit tested and documented

Layout

Flexbox & Grid

Spacing

Sizing

Typography

Backgrounds

Borders

Effects

Filters

Tables

Transitions & Animation

Transforms

Interactivity

SVG

Accessibility

Module parse failed: Identifier 'StyleSheet' has already been declared

While trying to use with the Expo and React Native.

Running with: expo start --web

Getting this output:

./node_modules/react-native-web/dist/vendor/react-native/FlatList/index.js 105:7
Module parse failed: Identifier 'StyleSheet' has already been declared (105:7)
File was processed with these loaders:

  • ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | import deepDiffer from "../deepDiffer";
    | import * as React from 'react';

import StyleSheet from "../../../exports/StyleSheet";
| import View from "../../../exports/View";
| import ScrollView from "../../../exports/ScrollView";
./node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js 146:7
Module parse failed: Identifier 'StyleSheet' has already been declared (146:7)
File was processed with these loaders:

  • ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | import RefreshControl from "../../../exports/RefreshControl";
    | import ScrollView from "../../../exports/ScrollView";

import StyleSheet from "../../../exports/StyleSheet";
| import UIManager from "../../../exports/UIManager";
| import View from "../../../exports/View";
./node_modules/react-native-web/dist/modules/createDOMProps/index.js 22:7
Module parse failed: Identifier 'StyleSheet' has already been declared (22:7)
File was processed with these loaders:

  • ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | import AccessibilityUtil from "../AccessibilityUtil";
    | import css from "../../exports/StyleSheet/css";

import StyleSheet from "../../exports/StyleSheet";
| import styleResolver from "../../exports/StyleSheet/styleResolver";
| import { STYLE_GROUPS } from "../../exports/StyleSheet/constants";
./node_modules/react-native-web/dist/exports/ProgressBar/index.js 39:7
Module parse failed: Identifier 'StyleSheet' has already been declared (39:7)
File was processed with these loaders:

  • ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    |
    | import * as React from 'react';

import StyleSheet from "../StyleSheet";
| import View from "../View";
| var ProgressBar = React.forwardRef(function (props, ref) {
./node_modules/react-native-web/dist/exports/ActivityIndicator/index.js 39:7
Module parse failed: Identifier 'StyleSheet' has already been declared (39:7)
File was processed with these loaders:

  • ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    |
    | import * as React from 'react';

import StyleSheet from "../StyleSheet";
| import View from "../View";
| var accessibilityValue = {
./node_modules/react-native-web/dist/exports/SafeAreaView/index.js 40:7
Module parse failed: Identifier 'StyleSheet' has already been declared (40:7)
File was processed with these loaders:

  • ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | import * as React from 'react';
    | import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';

import StyleSheet from "../StyleSheet";
| import View from "../View";
|
./node_modules/react-native-web/dist/exports/ImageBackground/index.js 41:7
Module parse failed: Identifier 'StyleSheet' has already been declared (41:7)
File was processed with these loaders:

  • ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | import { forwardRef } from 'react';
    | import Image from "../Image";

import StyleSheet from "../StyleSheet";
| import View from "../View";
| var emptyObject = {};
./node_modules/react-native-web/dist/exports/TouchableOpacity/index.js 44:7
Module parse failed: Identifier 'StyleSheet' has already been declared (44:7)
File was processed with these loaders:

  • ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | import useMergeRefs from "../../modules/useMergeRefs";
    | import usePressEvents from "../../modules/usePressEvents";

import StyleSheet from "../StyleSheet";
| import View from "../View";
|
./node_modules/react-native-web/dist/exports/TouchableHighlight/index.js 44:7
Module parse failed: Identifier 'StyleSheet' has already been declared (44:7)
File was processed with these loaders:

  • ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | import useMergeRefs from "../../modules/useMergeRefs";
    | import usePressEvents from "../../modules/usePressEvents";

import StyleSheet from "../StyleSheet";
| import View from "../View";
|
./node_modules/react-native-web/dist/exports/Pressable/index.js 45:7
Module parse failed: Identifier 'StyleSheet' has already been declared (45:7)
File was processed with these loaders:

  • ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | import useHover from "../../modules/useHover";
    | import usePressEvents from "../../modules/usePressEvents";

import StyleSheet from "../StyleSheet";
| import View from "../View";
|
./node_modules/react-native-web/dist/exports/Button/index.js 5:7
Module parse failed: Identifier 'StyleSheet' has already been declared (5:7)
File was processed with these loaders:

  • ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | import { StyledComponent } from "tailwindcss-react-native";
    | import * as React from 'react';

import StyleSheet from "../StyleSheet";
| import TouchableOpacity from "../TouchableOpacity";
| import Text from "../Text";
./node_modules/react-native-web/dist/exports/AppRegistry/AppContainer.js 5:7
Module parse failed: Identifier 'StyleSheet' has already been declared (5:7)
File was processed with these loaders:

  • ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | import { StyledComponent } from "tailwindcss-react-native";
    | import * as React from 'react';

import StyleSheet from "../StyleSheet";
| import View from "../View";
| var RootTagContext = React.createContext(null);
./node_modules/react-native-web/dist/exports/Modal/ModalAnimation.js 5:7
Module parse failed: Identifier 'StyleSheet' has already been declared (5:7)
File was processed with these loaders:

  • ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | import { StyledComponent } from "tailwindcss-react-native";
    | import * as React from 'react';

import StyleSheet from "../StyleSheet";
| import createElement from "../createElement";
| var ANIMATION_DURATION = 300;
./node_modules/react-native-web/dist/exports/StyleSheet/index.js 5:7
Module parse failed: Identifier 'StyleSheet' has already been declared (5:7)
File was processed with these loaders:

  • ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | import { StyledComponent } from "tailwindcss-react-native";
    | import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';

import StyleSheet from "./StyleSheet";
|
| if (canUseDOM && window.REACT_DEVTOOLS_GLOBAL_HOOK) {
./node_modules/react-native-web/dist/exports/View/index.js 63:7
Module parse failed: Identifier 'StyleSheet' has already been declared (63:7)
File was processed with these loaders:

  • ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | import usePlatformMethods from "../../modules/usePlatformMethods";
    | import useResponderEvents from "../../modules/useResponderEvents";

import StyleSheet from "../StyleSheet";
| import TextAncestorContext from "../Text/TextAncestorContext";
|
./node_modules/react-native-web/dist/exports/Text/index.js 63:7
Module parse failed: Identifier 'StyleSheet' has already been declared (63:7)
File was processed with these loaders:

  • ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | import usePlatformMethods from "../../modules/usePlatformMethods";
    | import useResponderEvents from "../../modules/useResponderEvents";

import StyleSheet from "../StyleSheet";
| import TextAncestorContext from "./TextAncestorContext";
|
./node_modules/react-native-web/dist/exports/TextInput/index.js 64:7
Module parse failed: Identifier 'StyleSheet' has already been declared (64:7)
File was processed with these loaders:

  • ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | import usePlatformMethods from "../../modules/usePlatformMethods";
    | import useResponderEvents from "../../modules/useResponderEvents";

import StyleSheet from "../StyleSheet";
| import TextInputState from "../../modules/TextInputState";
|
./node_modules/react-native-web/dist/exports/Picker/index.js 74:7
Module parse failed: Identifier 'StyleSheet' has already been declared (74:7)
File was processed with these loaders:

  • ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | import usePlatformMethods from "../../modules/usePlatformMethods";
    | import PickerItem from "./PickerItem";

import StyleSheet from "../StyleSheet";
| var Picker = React.forwardRef(function (props, forwardedRef) {
| var children = props.children,
./node_modules/react-native-web/dist/exports/Modal/ModalContent.js 7:7
Module parse failed: Identifier 'StyleSheet' has already been declared (7:7)
File was processed with these loaders:

  • ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
    | import View from "../View";

import StyleSheet from "../StyleSheet";
| var ModalContent = React.forwardRef(function (props, forwardedRef) {
| var active = props.active,
./node_modules/react-native-web/dist/exports/CheckBox/index.js 89:7
Module parse failed: Identifier 'StyleSheet' has already been declared (89:7)
File was processed with these loaders:

  • ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | import * as React from 'react';
    | import createElement from "../createElement";

import StyleSheet from "../StyleSheet";
| import View from "../View";
| var CheckBox = React.forwardRef(function (props, forwardedRef) {
./node_modules/react-native-web/dist/exports/Modal/ModalFocusTrap.js 8:7
Module parse failed: Identifier 'StyleSheet' has already been declared (8:7)
File was processed with these loaders:

  • ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | import View from "../View";
    | import createElement from "../createElement";

import StyleSheet from "../StyleSheet";
| import UIManager from "../UIManager";
|
./node_modules/react-native-web/dist/exports/Switch/index.js 90:7
Module parse failed: Identifier 'StyleSheet' has already been declared (90:7)
File was processed with these loaders:

  • ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | import createElement from "../createElement";
    | import multiplyStyleLengthValue from "../../modules/multiplyStyleLengthValue";

import StyleSheet from "../StyleSheet";
| import View from "../View";
| var emptyObject = {};
./node_modules/react-native-web/dist/exports/ScrollView/index.js 93:7
Module parse failed: Identifier 'StyleSheet' has already been declared (93:7)
File was processed with these loaders:

  • ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | import ScrollResponder from "../../modules/ScrollResponder";
    | import ScrollViewBase from "./ScrollViewBase";

import StyleSheet from "../StyleSheet";
| import View from "../View";
| import React from 'react';
./node_modules/react-native-web/dist/exports/Image/index.js 94:7
Module parse failed: Identifier 'StyleSheet' has already been declared (94:7)
File was processed with these loaders:

  • ./node_modules/@expo/webpack-config/node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | import ImageLoader from "../../modules/ImageLoader";
    | import PixelRatio from "../PixelRatio";

import StyleSheet from "../StyleSheet";
| import TextAncestorContext from "../Text/TextAncestorContext";
| import View from "../View";
./node_modules/tailwindcss-react-native/dist/context/platform.js 11:11
Module parse failed: Unexpected token (11:11)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| });
| function PlatformProvider({ preview = false, platform = react_native_1.Platform.OS, ...props }) {
return <PlatformContext.Provider value={{ preview, platform }} {...props}/>;
| }
| exports.PlatformProvider = PlatformProvider;
./node_modules/tailwindcss-react-native/dist/context/color-scheme.js 13:84
Module parse failed: Unexpected token (13:84)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| });
| function ColorSchemeProvider({ initialColorScheme, ...props }) {
const [colorScheme, setColorScheme] = (0, react_1.useState)(initialColorScheme ?? react_native_1.Appearance.getColorScheme() ?? "light");
| return (<ColorSchemeContext.Provider value={{
| colorScheme,
./node_modules/tailwindcss-react-native/dist/context/device-media.js 19:12
Module parse failed: Unexpected token (19:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| ? "portrait"
| : "landscape";
return (<DeviceMediaContext.Provider value={{
| width,
| height,
./node_modules/tailwindcss-react-native/dist/styled.js 21:23
Module parse failed: Unexpected token (21:23)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const baseClassName = typeof styledBaseClassNameOrOptions === "string"
| ? styledBaseClassNameOrOptions
: maybeOptions?.baseClassName;
| function Styled({ className, tw: twClassName, baseTw, style: styleProp, children: componentChildren, ...componentProps }, ref) {
| const { platform, preview } = (0, platform_1.usePlatform)();
./node_modules/tailwindcss-react-native/dist/styled-component.js 32:11
Module parse failed: Unexpected token (32:11)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| exports.StyledComponent = React.forwardRef(({ component, ...options }, ref) => {
| const Component = (0, styled_1.styled)(component);
return <Component {...options} ref={ref}/>;
| });
|
./node_modules/tailwindcss-react-native/dist/provider.js 32:131
Module parse failed: Unexpected token (32:131)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const device_media_1 = require("./context/device-media");
| const style_sheet_1 = require("./context/style-sheet");
function TailwindProvider({ styles = globalThis.tailwindcss_react_native_style, media = globalThis.tailwindcss_react_native_media ?? {}, initialColorScheme, preview, platform, children, }) {
| const stylesheet = { styles, media };
| return (<platform_1.PlatformProvider preview={preview} platform={platform}>
./node_modules/tailwindcss-react-native/dist/context/style-sheet.js 5:43
Module parse failed: Unexpected token (5:43)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| exports.useStyleSheet = exports.StyleSheetContext = void 0;
| const react_1 = require("react");
globalThis.tailwindcss_react_native_style ?? (globalThis.tailwindcss_react_native_style = {});
| globalThis.tailwindcss_react_native_media ?? (globalThis.tailwindcss_react_native_media = {});
| exports.StyleSheetContext = (0, react_1.createContext)({

// tailwind.config.js <-- trying to avoid processing node_modules, same problem with ["./**/*.{js,jsx,ts,tsx}"],

module.exports = {
    content: ["./src/*.{js,jsx,ts,tsx}"],
    theme: {
        extend: {},
    },
    plugins: [],
}

// babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ["tailwindcss-react-native/babel"]
  };
};

[Feature] Allow classNames attribute to be customisable

className was chosen as it is the tailwindcss default - which provides out of the box editor support. But there are some edge cases where this causes some issues eg 3rd party web components may expect a className prop string

This option should be customisable via:

  • Babel options
  • Per file via comments

I can't make it work on Windows

Hello,

I'm super exited by this project, but I can't manage to make it work in my current expo project.
(I'm on the currently on the last version of expo)

I followed all installation steps, and I have no error/warning, it just don't work with Expo GO.

Maybe it's not compatible ? Thx

Responsive styles not working with SSR

Hey! I'm just getting started with the library and tried to setup a simple project with solito and tailwindcss-react-native. I couldn't get the responsive styles to work with SSR. I mean that styles that are being generated don't include media queries and the responsive part is being part is being evaluated at runtime so i get a mismatch of styles until I resize my screen.

Is this currently an issue or am I not setting up the library correctly?

Also, I created a POC a while ago and solved this issue with Postcss, maybe you've made your research and came across my solution (react-native-tailwindcss). I really like the idea of making this with work with babel and I know there is some work being done in react-native-web to support this natively.

I know there are many libraries trying to achieve the same thing, and I think this one has some really great potential!

Let me know if there is something I can help with and keep up the great work πŸš€

NativeWind & v2.0.0

This is mostly an issue for myself. to track my progress on v2.0.0.

v2.0.0 started as a small cleanup but has grown into a large refactor fixing many underlying issues. It will also be released under a new name NativeWind πŸŽ‰

The new (in progress) documentation can be found here: https://www.nativewind.dev

A migration guide can be found here: https://www.nativewind.dev/guides/tailwindcss-react-native

Features

  • StyleSheetStore
  • Rename component to group-scoped-start
  • Refactor useTailwind()
  • Platform functions
  • PixelRatio functions
  • Stylesheet functions
  • Per platform theme
  • Group
  • vw/vh units
  • Refactor topics into static output
  • Refactor state bit masks into static output
  • optimise pseudo classes
  • optimise child styles classes

Testing

  • Vanilla (native)
  • Vanilla (web)
  • Expo (native)
  • Expo (web)
  • NextJS (web)
  • Platforms
  • Light/dark
  • Responsive classes
  • Platform functions
  • PixelRatio functions
  • Stylesheet functions
  • Per platform theme
  • Group
  • Group-scoped
  • Parent
  • Pseudo classes
  • Child styles
  • Units
  • PixelRatio functions
  • vw/vh units
  • EAS build pipeline

Website

  • Rebrand
  • Remove TaiwindProvider from setup
  • Rewrite setup as "native" and "web" sections
  • Move frameworks to top level
  • Add live example on introduction
  • Add platform variants page
  • Add responsive design page
  • Add typescript page
  • Add themes page
  • Add light/dark mode page
  • Rewrite useTailwind docs
  • Rewrite TailwindProvider docs
  • Rewrite useColorScheme docs
  • Rewrite parent state styling page
  • Rewrite preview features pages
  • Algolia search

Repo

  • Release announcement
  • Rebrand readme
  • Deprecate tailwindcss-react-native
  • Rename repo
  • Update Solito PR

Post 2.0

  • RTL support
  • group-scoped-end

[Bug] Ignoring components doesn't check allowModules?

Referencing #16:

The ignoring components feature is great, and means we are now able to start fully using this library! But it's not quite there yet for our usage on web. I have made a little patch on our end that makes it usable so we will start to use it! πŸŽ‰

I may be missing something, but these are the issues we are having with it, and note this is on web:

  1. isAllowedProgramPath appears to only check allowRelativeModules, and does not check allowModules or blockModules?
  2. allowModules would need to override allowRelativeModules. We have separate paths in the tailwind config for the web/rn modules, so implicitly allowing the web modules defeats the purpose.
  3. blockModules appears to be used in native-visitor but not in web?

The project's Babel config is invalid: Cannot find module 'tailwindcss'

Hi there,

I love tailwind so much and have been looking around to find a better solution than tailwind-rn for my react native apps. I found tailwindcss-react-native and am so eager to try it out. However, I got an issue when trying to install it with expo. Please check the attachment and advise!

Screen Shot 2022-04-07 at 20 24 39

[test tailwind-react-native.zip](https://github.com/marklawlor/tailwindcss-react-native/files/8443203/test.tailwind-react-native.zip)

[Babel] Inject styles only

Description

When using the library with both NextJS & Native, you may want a setup where you only want to use the babel plugin to inject styles for native.

Because NextJS has inbuilt support for Tailwindcss, the user will use the Component API. However they still want the best DexUX for native, so they want to use the babel plugin. Now the plugin in transforming already compatible components.

Solution

Add skipTransform option to plugin that leaves components as is. The plugin will only inject styles.

TypeError: Cannot convert undefined value to object on first launch

Hello,

I hope I'm not doing something wrong as this is the 3rd issue we've run into setting up this library. When the app is first launched in the development environment (not sure about production), we are faced with this error

The only way around this was to remove all classNames and re-add them while the app is running, which is just not feasible if the app is any more complex than a hello world application. Followed the simplest version of the instructions on the documentation website.

Environment

[Docs] Add docs for NextJS

I get two (I think related) errors on react-native-web:

error - ./node_modules/tailwindcss-react-native/dist/provider.jsx
Module parse failed: Unexpected token (8:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     const [styleValue] = useState({ media, styles });
|     const [colorScheme, setColorScheme] = useState(Appearance.getColorScheme() ?? "light");
>     return (<TailwindStyleContext.Provider value={styleValue}>
|       <TailwindColorSchemeContext.Provider value={overrideColorScheme || colorScheme}>
|         <TailwindSetColorSchemeContext.Provider value={setColorScheme}>
(node:41732) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)

and

error - SyntaxError: Unexpected token 'export'

I think this may be because of my tsconfig settings, but next.js enforces module: esnext and jsx: preserve. Here's my tsconfig:

{
  "compilerOptions": {
    "target": "ES2018",
    "lib": [
      "dom",
      "dom.iterable",
      "es2019",
      "esnext"
    ],
    "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "rootDirs": [
      "./src",
      "../common/"
    ],
    "paths": {
      "*": [
        "./node_modules/*"
      ],
      "~/*": [
        "./src/*"
      ],
      "common/*": [
        "../common/*"
      ]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "../common/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

Property '__useParseTailwind' doesn't exist

Hey, I see this is very new, but I love the idea and I'm excited to use it in a new project.

I'm getting a Property '__useParseTailwind' doesn't exist error when adding it to a React Native app, in the iOS simulator.

It happens both when using the babel plugin as 'tailwindcss-react-native/babel' or ['tailwindcss-react-native/babel', { platform: 'native' }]

[Bug] Crashes without tailwindcss and tailwind.config.js

I see that tailwindcss is a peer dependency, but I think the docs should mention both steps:

  1. Install tailwindcss package
  2. Create a tailwind.config.js file. Does it need to have defaults set up? It seems to work for me when it's just an empty file. So maybe the plugin can work even if there is no config file?

[Feature] Improve config

Currently the config is split between tailwind.config.js and babel.config.js. Ideally all the config (except platform) could be loaded via the tailwind.config.js

The automated release is failing 🚨

🚨 The automated release from the next branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this πŸ’ͺ.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the next branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.


No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.


Good luck with your project ✨

Your semantic-release bot πŸ“¦πŸš€

[Feature] Support useTailwind

There are instances where a style objects needs to be passed to a non-style attribute.

<MotiView
  from={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  exit={{ opacity: 0 }}
/>

We should allow the use of useParseTailwind for these instances

<MotiView
  from={useParseTailwind('opacity-0')}
  animate={useParseTailwind('opacity-100')}
  exit={useParseTailwind('opacity-0')}
/>

[Bug] Invalid guessAtPath crashes babel plugin

We have some aliased paths in our tsconfig.json for sharing code between web/RN, so we import common code like:

import { Info } from 'common/Interfaces'

This import causes the babel plugin to crash on lstatSync in get-import-blocked-components.js because the guessAtPath is not respecting the paths defined in tsconfig.json, so it's an invalid directory.

These lines in tsconfig.json set up that path alias:

{
    "compilerOptions": {
        "paths": {
            "common/*": [
                "../common/*"
            ]
        }
    }
}

For our usage we're using allowModules so we can just patch these lines out for now.

Platform specific theming

Description

Early feedback from native developers suggests that the theming system is to "web" based and needs to incorporate native platform elements. This is an umbrella issue tracking these requests / progress on these issues.

These include

  • StyleSheet.hairlineWidth
  • Platform Colors
  • Device reactive styling (eg text scaling)
  • Platform specific values in the base theme

Not supporting platform values appears to be a blocker on proper support for RN for Windows & MacOS where these values are widely used.

className type error

I created a new project with the expo blank typescript template.
Then I followed the Quick start tutorial to implement tailwindcss-react-native.

It works perfectly but unfortunately I get an error with typescript error because of className.

No overload matches this call. #2769
Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'. #2772

I use VSCode

[BUG] Some regex not compatible with rn-web on Safari

I created a simple starter template, react-native-starter-lite.

Everything works fine, but when I export it with expo build:web and open the web page on Safari, the page breaks and throws an error SyntaxError: Invalid regular expression: invalid group specifier name.

It seems like: some regex usage in the codebase is not compatible with Safari, negative-lookbehind

src/classname-to-inline-style.ts

       ⬇️
if (/(?<!\\):active/.test(cssRule.selectorText)) states.push(active);
if (/(?<!\\):focus/.test(cssRule.selectorText)) states.push(focus);
if (/(?<!\\):hover/.test(cssRule.selectorText)) states.push(hover);

[Bug] styled issues with Animated components

On web with preview enabled, if I wrap Animated components with styled, then the style prop has no effect, and there is an error within styleq:

styleq: width typeof 100 is not "string".

const StyledView = styled(Animated.View);
const StyledText = styled(Animated.Text);

export default function App(props) {
  return (
    <TailwindProvider platform="web" preview>
      <View style={styles.container}>
        <StyledView
          className="p-4 mt-4 bg-gray-800 rounded-lg"
          style={{ width: 100, backgroundColor: 'blue' }}
        >
          <StyledText className="font-bold text-white">
            React Native component
          </StyledText>
        </StyledView>
      </View>
    </TailwindProvider>
  );
}

The error goes away if I change it to styled(View) or remove the preview prop.

I'm not sure if it's something you can fix or if it's something in react-native-web?

I updated my test repo with this: https://github.com/jmeistrich/tailwindcss-react-native-next/. But I think it should be easy to reproduce with the code above.

[Docs] "Rendered more hooks" error - cavats & workarounds

Adding a className or removing a className prop crashes with a "Rendered more hooks than expected" (or fewer) error in the Fast Refresh. I'm not sure how you'd solve it though, because you wouldn't want to use the hook on all components...

[Bug] Cannot find module './dist/plugin'

I updated to 1.3.0 in a Next.js project and it throws this error (I replaced my local paths with ...):

error - ./node_modules/next/dist/client/dev/amp-dev.js
Error: [BABEL] /.../node_modules/next/dist/client/dev/amp-dev.js: Cannot find module './dist/plugin'
Require stack:
- /.../node_modules/tailwindcss-react-native/plugin.js
- /.../tailwind.config.js
- /.../node_modules/tailwindcss-react-native/dist/babel/utils/get-tailwind-config.js
- /.../node_modules/tailwindcss-react-native/dist/babel/root-visitor.js
- /.../node_modules/tailwindcss-react-native/dist/babel/index.js
- /.../node_modules/tailwindcss-react-native/babel.js
- /.../node_modules/next/dist/compiled/babel/bundle.js
- /.../node_modules/next/dist/compiled/babel/code-frame.js
- /.../node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/parseScss.js
- /.../node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/webpackModuleError.js
- /.../node_modules/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js
- /.../node_modules/next/dist/build/webpack-config.js
- /.../node_modules/next/dist/server/dev/hot-reloader.js
- /.../node_modules/next/dist/server/dev/next-dev-server.js
- /.../node_modules/next/dist/server/next.js
- /.../node_modules/next-remote-watch/bin/next-remote-watch (While processing: "/.../node_modules/tailwindcss-react-native/babel.js")

Let me know if you can't reproduce it and I can try to make a test repo.

[Bug] Forwarding className to child doesn't work

If I pass className into a component which then passes that className down to a child component, it does not seem to be processed.

In this example, RNComponent is passed "font-bold" in the className prop, but the second Text component renders with no className.

export function RNComponent({ className }){
    return (
      <>
        <Text className="font-bold">RN component</Text>
        <Text className={className}>RN component with className prop</Text>
      </>
    );
}
...
<RNComponent className="font-bold" />

I've updated my repo with a repro for that: https://github.com/jmeistrich/tailwindcss-react-native-next

[Bug] Styled components unmount/mount every render

Using className on a styled component causes that component to unmount/mount every time its parent re-renders. If it does not have a className it does not re-mount.

App:

export default function App() {
  const [state, setState] = useState(false);
  useInterval(() => setState((s) => !s), 1500);
  return (
    <TailwindProvider>
      <View>
        <Text>Styled component with className keeps mounting:</Text>
        <TestComponent className="bg-white" />
        <Text>Styled component without className does not:</Text>
        <TestComponent />
      </View>
    </TailwindProvider>
  );
}

Component:

let num = 0;

export const TestComponent = memo(function TestComponent() {
  useEffect(() => {
    console.log("Mount");
    num++;
    return () => console.log("Unmount");
  }, []);

  return (
    <View>
      <Text>Re-mounted {num} times</Text>
    </View>
  );
});

I believe the problem is that StyledComponent creates a new styled which returns a new anonymous function every time, so every render creates a whole new component. I think wrapping it in a useMemo would solve the problem, but I'm not sure if that might introduce other problems since it's very core code...

I'll submit a PR with that fix in case that's a good solution.

I have a test repo at: https://github.com/jmeistrich/test-tailwindcss-react-native. It's just the expo template plus this library's basic babel installation steps, with the above component, so it should be easy enough to just paste into your own tests.

Note that I wrapped the component in memo to make sure the component should not re-render since it has no props, and only the instance with className is re-rendering and re-mounting.

custom color in tailwind config file not being recognized

Everything works great on this package. The docs are clear and helpful. I only have one issue. When I add a custom color to tailwind.config.js it's not registering. I've restarted expo but still doesn't work. This is my config file for tailwind:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./screens/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        "regal-blue": "#50d71e",  // this part is not working
      },
    },
  },
  plugins: [],
};

Do you have any suggestions? It's running
expo 5.4.11
react-native": "0.68.2
react": "17.0.2

Feat: Allow styled() to style multiple props

Example:

const PressableIcon = styled(({ icon: Icon, children, iconStyle, textStyle ...props }) {
  return (
    <Pressable { ...props }>
      <Icon style={iconStyle} />
      <Text style={textStyle}>{children}</Text>
    </Pressable>
  )
}, { props: ["className", "iconStyle", "textStyle"] })

<PressableIcon icon={MailIcon} iconStyle="h-4" textStyle="text-white">Button Text</PressableIcon>

[Feature] Ignore components by import path / source file location

I'm trying to work around an issue of mixing reactjs components with react-native-web components. I need the babel transformer to skip the web components and only transform the react-native-web components. So for example I have a reactjs component <Button>text</Button> and it is being transformed because it starts with a capital letter.

#8 could be a workaround, so that any RN components would use a different prop and that would skip transforming className on the web components. But it would be ideal if our developers could use div and View interchangeably on our web app.

But I have another idea: a plugin option to set exclusion paths. So the babel transformer could look at the file's imports and if a JSX element was imported from an excluded path, skip processing the element. So if I exclude the web folder and <Button .../> was imported as import Button from 'web/Button' it would be skipped.

If this seems like a good idea to you I'd be happy to submit a PR. This is the one thing blocking me from being able to fully adopt it. Or is there an easier solution?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.