Gus
Gus
PostsComments
TTCTheo's Typesafe Cult
Created by 5knnbdwm on 4/16/2024 in #questions
Is Theo's new tutorial any good for a Vue Dev?
If you know enough Javascript, look into react.dev to learn the basic hooks and get to know that "mental model". In less than two days, you should be ready for Theo's tutorial IMO
7 replies
TTCTheo's Typesafe Cult
Created by Gus on 7/10/2023 in #questions
can't get to work NativeWind for Expo Mobile and Web
That would be a nice suggestion actually, but it seems weird that it doesn't work like it's supposed to...
7 replies
TTCTheo's Typesafe Cult
Created by Gus on 7/10/2023 in #questions
can't get to work NativeWind for Expo Mobile and Web
If I can share something more, please tell me, I've been thinking about it all day long and I can't figure it out
7 replies
TTCTheo's Typesafe Cult
Created by Gus on 7/10/2023 in #questions
can't get to work NativeWind for Expo Mobile and Web
package.json 
{
  "name": "sticker-smash",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "48.0.18",
    "expo-status-bar": "~1.4.4",
    "nativewind": "^2.0.11",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.8",
    "react-native-web": "~0.18.10"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@expo/webpack-config": "^18.1.1",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.25",
    "postcss-loader": "^4.2.0",
    "tailwindcss": "^3.3.2"
  },
  "private": true
}
{
  "name": "sticker-smash",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "48.0.18",
    "expo-status-bar": "~1.4.4",
    "nativewind": "^2.0.11",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.8",
    "react-native-web": "~0.18.10"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@expo/webpack-config": "^18.1.1",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.25",
    "postcss-loader": "^4.2.0",
    "tailwindcss": "^3.3.2"
  },
  "private": true
}
babel.config.js 
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ["nativewind/babel"],
  };
};
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ["nativewind/babel"],
  };
};
postcss.config.js 
module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer"), [require("nativewind/postcss")]],
};
module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer"), [require("nativewind/postcss")]],
};
tailwind.config.js 
/** @type {import('tailwindcss').Config} */

const nativeWind = require("nativewind/tailwind/css");

module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [nativeWind],
};
/** @type {import('tailwindcss').Config} */

const nativeWind = require("nativewind/tailwind/css");

module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [nativeWind],
};
webpack.config.js 
const createExpoWebpackConfigAsync = require("@expo/webpack-config");

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: {
        dangerouslyAddModulePathsToTranspile: ["nativewind"],
      },
    },
    argv
  );

  config.module.rules.push({
    test: /\.css$/i,
    use: ["postcss-loader"],
  });

  return config;
};
const createExpoWebpackConfigAsync = require("@expo/webpack-config");

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: {
        dangerouslyAddModulePathsToTranspile: ["nativewind"],
      },
    },
    argv
  );

  config.module.rules.push({
    test: /\.css$/i,
    use: ["postcss-loader"],
  });

  return config;
};
style.css 
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;
App.js (final version) 
import { StatusBar } from "expo-status-bar";
import { NativeWindStyleSheet } from "nativewind";
import { Text, View } from "react-native";

/* import "./style.css"; */

NativeWindStyleSheet.setOutput({ default: "native" });

export default function App() {
  return (
    <View className="flex-1 items-center justify-center bg-white">
      <Text className="text-red-600 text-2xl">Tailwind should be up now! :D</Text>
      <StatusBar style="auto" />
    </View>
  );
}
import { StatusBar } from "expo-status-bar";
import { NativeWindStyleSheet } from "nativewind";
import { Text, View } from "react-native";

/* import "./style.css"; */

NativeWindStyleSheet.setOutput({ default: "native" });

export default function App() {
  return (
    <View className="flex-1 items-center justify-center bg-white">
      <Text className="text-red-600 text-2xl">Tailwind should be up now! :D</Text>
      <StatusBar style="auto" />
    </View>
  );
}
7 replies