Trouble implementing Tailwind configuration in React Native

As a newcomer to react native and typescript, I am trying to use Tailwind CSS in my project by following the instructions on Nativewind for configuring tailwind.config.js. Here is the initial code snippet:

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

However, the CSS doesn't seem to apply to any files in the src folder. If I modify the configuration like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.tsx",
    // "./src/**/*.{js,jsx,ts,tsx}",
    "./src/screens/Home.tsx",
    "./src/screens/MainLayout.tsx",
    "./src/screens/Profile.tsx",
    "./src/screens/Search.tsx",
    "./src/screens/SplashScreen.tsx",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

then it works as expected. Can anyone point out what I might be doing wrong?

javascripttypescriptreact-nativetailwind-cssnativewind

Answer №1

Hey there, give this a shot by applying CSS to each file based on its extension:

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

I hope this solution works for you!

Answer №2

Big shoutout to Aqeel Ahmad for helping me solve this issue using glob

Here's the updated configuration in tailwind.config.js : 

/** @type {import('tailwindcss').Config} */
const globSync = require('glob').sync;

module.exports = {
  content: [
    "./App.tsx",
    ...globSync('./src/**/*.tsx'),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Troubleshooting: Issues with jQuery Counter Functionality

Hey there, I'm new to JavaScript and jQuery! I've got this form set up with Bootstrap's disabled class: Note: the 'disabled' class in bootstrap properly disables and enables the button based on conditions. <form action="" met ...

javascriptjqueryhtmltwitter-bootstrap

Every time I try to run a basic thread code, it causes the Firefox extension (nsIThread

Whenever I try to create a basic thread in Firefox (Aurora 30), it consistently crashes. The only action it performs is executing the function "task" from the thread. Any thoughts on what could be causing this issue? function task(a, b) { alert(a ...

javascriptfirefoxfirefox-addon

Looking for a categorized list of unique special characters and their classifications

I am currently developing a web application focused on providing machine translation support. This involves taking source text for translation and converting it into the user's desired language. At the moment, the application is in the unit testing p ...

phpjavascriptunit-testingtesting

What is the method for creating a loop in Angular?

let m = 5; for (let i = 0; i < m; i++) { document.write(i); } What is the output of i in Angular? This code is not functioning as expected. $scope.B = []; angular.forEach([0, 1, 2, 3], function (value, index) { $scope.B.push ...

javascriptangularjsarrays

Determine the maximum and minimum numbers by inputting a number and utilizing jQuery

<script type="text/javascript"> function findLargestNumber() { var number1, number2; number1 = Number(document.getElementById("N").value); number2 = Number(document.getElementById("M").value); if (number1 > numb ...

javascriptjqueryarraystypescriptif-statement

Which li in the row is the final target?

In my list of items, there are no special classes assigned to the list items. <ul> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> ...

javascriptjquerycsshtml-lists

What could be causing jQuery to successfully animate the size of my div element but not the color of my text?

My jQuery code successfully animates the height and width of divs, but it doesn't seem to be working for the text color within those divs. I'm not sure what I'm missing here. Below is the full code snippet, with lines 9 and 12 being the ones ...

javascriptjqueryhtmlcss

Error: jQuery is unable to access the property 'xxx' because it is undefined

While attempting to make a post request from the site to the server with user input data, I encountered an error message saying TypeError: Cannot read property 'vehicle' of undefined as the response. Here is the HTML and script data: <!DOCTY ...

javascriptjqueryhtmlnode.jsexpress

Is there a way to choose the following element after $(this) in the sequence?

I've got this snippet of code that I'm working with: $("td").on("click", function(){ var result = $(this).closest('table').siblings('form').find('input[name="inputname"]').attr('value'); alert(result ...

javascriptjqueryhtmlcss

Using JSON to populate an Interface Array

In my Angular project, I've defined the following interface: export interface FruitsType { id: String; name: String; selected : String; } And this is the JSON data: { [ {"id" :"f1", "name": "apple", "selected": "false"}, {"id" ...

javascriptarraysjsonangular

Guide on adding a custom function to a class in TypeScript

Is there a way to inject a custom function into my class from the variable functions? I need assistance with this. This is my code snippet: const functions = { foo: () => console.log('foo') } class ParentBase { parentHello() { ...

javascripttypescriptclassextends

Issue with binding nested ViewModels/components in Knockoutjs using TypeScript does not resolve

Struggling with implementing a viewModel within another viewModel in knockout. Any assistance would be greatly appreciated. Using typescript and aiming to have a list of address controls, each with their individual viewmodel. Initially, the project functi ...

typescriptknockout.jsweb-component

Preserving variable values across page transitions in Angular 2

I am facing an issue with my multi-page website that uses a router. I want to pass a variable value from one page to another. Here is the code snippet from my contact form page: testName:string = "hello"; ngOnInit() { this.dataService.Stream ...

angulartypescriptrxjs

What JQuery plugins are must-haves for enhancing social networking websites?

Would appreciate any recommendations. ...

javascriptjqueryhtmlcsstemplates

JQuery addClass function not functioning properly when used in conjunction with an AJAX request

I have a website where I've implemented an AJAX pagination system. Additionally, I've included a JQUERY call to add a class to certain list items within my document ready function. $(document).ready(function(){ $(".products ul li:nth-child(3 ...

javascriptphpajaxjquery

Having trouble retrieving react environment variables from process.env?

When developing my React App, I utilized a .env file to securely store some essential API keys. However, as I attempted to access these variables using process.env, I encountered an issue where the values appeared to be set as undefined. To launch the app ...

javascriptreactjs

The Challenge of Managing Storage with Angular RestangularInterceptor

Currently, I am utilizing a RestangularProvider to implement an $http interceptor for injecting an authentication header into all restangular requests. However, I have encountered an issue where I cannot inject services into app.config(), preventing me fro ...

javascriptangularjsrestangular

Is there a way to verify if JQuery libraries (and other files containing custom code) have been properly included?

So I've got this JavaScript file with some code that relies on JQuery libraries. How can I make sure that both the file and the libraries are properly included? (I hope this question isn't too silly.) ...

javascripthtmljqueryframeworks

What is the best way to operate both a Django and React server concurrently?

Is it feasible to run both Django and React.js servers simultaneously? Currently, I have to individually start the Backend server using python manage.py run server and then switch to Frontend to run npm start. I am working on a Fullstack project with sepa ...

javascriptpythondjangoreactjs

HTML elements not displaying in Ajax form

I am encountering an issue with my ajax based feedback form where the form is displaying the html from the response instead of processing it correctly. Here is the JQuery code: $(document).ready(function() { var form_holder = $('#form-holder'); ...

javascriptphpjqueryhtmlajax