Configuring TailwindCSS for React-Native Expo-Web using NativeWind

[Music] hello everyone welcome to my channel in the previous video I have shown you how to use Tailwind CSS in your mobile application using Expo today in this video I am going to show you how to configure Tailwind CSS with Expo web I have created an expo application with tabs template and also opened the project in VSS code I already launched the Android emulator to save some time this is the project folder [Music] [Music] structure now let's run the app by starting the server using npx Expo start command [Music] press a to open the app in Android device or an emulator press W to open the app in a web browser [Music] [Music] m [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] watch a glimpse of setup and installation process of native wind and Tailwind [Music] CSS [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] now for the Expo web we need to follow the Tailwind CSS documentation and proceed with the steps using with post CSS [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] n [Music] [Music] [Music] me [Music] [Music] me [Music] [Music] [Music] oh [Music] [Music] me [Music] [Music] [Music] my [Music] make sure you have all the required dependencies installed in your project [Music] [Music] [Music] yeah [Music] we have to import the CSS file which we have created earlier in plus html. TSX file [Music] now you can see that Tailwind CSS classes are working for the web in Expo application [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] o [Music] [Music] [Music] oh [Music] [Music] o [Music] [Music] o [Music] [Music] [Music] w [Music] o [Music] o [Music] let's import The View and text tags from react native but not as a custom [Music] component finally we can see the background color in web browser as well in my case without creating the webpack doc config.js also native wind got worked on web if you face any issue please add the webpack doc config.js file in your project as per the documentation and check [Music] [Music] it [Music] [Music] that's it for today's video thanks for watching let's meet in the next one please do like share the video and subscribe to the channel for more content

Channel: Sai Sumedh

Views: 1,010

Keywords: react-native, react-native-expo, expo, expo-web, mobileappdevelopment, tailwindcss

Id: xORP20HQ50w

Length: 23min 56sec (1436 seconds)

Published: Sun Nov 12 2023