React-native-rn tailwind doesn't generate tailwind.json

user_17987461 0
Viewed 497

I followed all the steps of installing react-native-rn.

Everything worked fine at first, but when I moved input.cssto src/css/input.css,it just generates src/css/tailwind.css, but not the src/css/tailwind.json file

I did modify the lines at package.json so they look like this.

"build:tailwind": "tailwindcss --input ./src/css/input.css -o ./src/css/tailwind.css --no-autoprefixer && tailwind-rn",

"dev:tailwind": "concurrently \"tailwindcss -i ./src/css/input.css -o ./src/css/tailwind.css --no-autoprefixer --watch\" \"tailwind-rn --watch\""

This is basically how my directory looks (I hided folders as node_modules, android, etc)

enter image description here

tailwind-css react-native reactjs
1 Answers

At the end of either command in package.json you'll see they both have tailwind-rn, basically what the command does is: take this file (tailwind.css) and compile it to (tailwind.json)

So, because you changed the path, default values (react-native-rn --input tailwind.css --output tailwind.json) don't work.

Manually add at the end of the commands react-native-rn --input path/to/the/generated/css.css --output path/to/where/you/want/your/json.json

In this example, it this would be:
-i equals to --input, and -o to --ouput

"build:tailwind": "tailwindcss --input ./src/css/input.css -o ./src/css/tailwind.css --no-autoprefixer && tailwind-rn -i ./src/css/tailwind.css -o ./src/css/tailwind.json",

"dev:tailwind": "concurrently \"tailwindcss -i ./src/css/input.css -o ./src/css/tailwind.css --no-autoprefixer --watch\" \"tailwind-rn -i ./src/css/tailwind.css -o ./src/css/tailwind.json\""

Also remember to edit App.js imports

//from
import utilities from './tailwind.json';

//to
import utilities from './src/css/tailwind.json';
user_179874610
Related