Comments (21)
For those who want a quick copy and paste:
"tailwindCSS.experimental.classRegex": ["tailwind\\('|\"([^'|\")]*)"]
^ add to your VS Code settings.json
file. I've adjusted the regex to pick up single or double quotes.
from tailwind-rn.
I have an idea of how to support a typed API, but we have to migrate to TypeScript in that case. From TypeScript 2.9 you can import JSON modules in TS files with full typed support. We can create a tailwind()
method where we expose the keys of the JSON and get amazing autocompletion and type-safety β¨
from tailwind-rn.
@matepapp nice find!
However, I can't think of a sensible TypeScript solution that would not require the API change I mentioned above. Your current implementation would only allow one className in the tailwind
function unless you generate all combinations of className strings.
My proposal would look something like this:
import JSON from "./styles.json";
type Keys = keyof typeof JSON;
const tailwind = (...props: Keys[]) => {
return props.reduce(
(styles, curr) => ({
...styles,
...JSON[curr],
}),
{}
);
}
from tailwind-rn.
There is now a way to achieve this with the official VSCode extension.
https://twitter.com/ecklflorentin/status/1344242188574720000
from tailwind-rn.
To make intellisense work in a tailwind-rn project, i.e. style={tailwind('mb-1')}
I use the following:
/* TailwindCSS */
"tailwindCSS.experimental.classRegex": ["tailwind\\('([^)]*)\\')", "'([^']*)'"]
from tailwind-rn.
Yes, this was only just a quick example to demonstrate the possibility of type-safety. Your solution is definitely a step ahead, but I think we should support regular string
type as well to keep the API backward compatible. Switching based on the type could be a temporary workaround. What do you think?
I might can create a draft pull request next week if itβs okay for you @vadimdemedes
from tailwind-rn.
Well we could either add an additional function to the core or add readme instructions on how to achieve this with a custom tailwind function (would be neat if useVariables
would get exported then). I think the opt-in instruction might be the better choice since it wouldn't force the codebase to TypeScript.
from tailwind-rn.
@matepapp Yeah, I think something like that would work. Would be still great to preserve support for specifying multiple classes in one string for people that don't care about autocomplete (like me).
The only thing I'm wondering about is how will it work with custom configs?
from tailwind-rn.
@vadimdemedes You may be interested in following this Tailwind Intellisense issue (https://github.com/tailwindcss/intellisense/issues/129) in regards to this.
from tailwind-rn.
@tommulkins Thanks for linking it here!
from tailwind-rn.
I think this might have just become more feasible with the improvements in TS 4.1
https://twitter.com/diegohaz/status/1309489079378219009
from tailwind-rn.
Is there a PR on the horizon for this?
from tailwind-rn.
I think we can close this issue ππ»
from tailwind-rn.
I must run npm install tailwindcss
to have Tailwind CSS IntelliSense autocomplete feature, can I ignore this step?
from tailwind-rn.
I must run
npm install tailwindcss
to have Tailwind CSS IntelliSense autocomplete feature, can I ignore this step?
Afaik you only need a tailwind.config.js in your project root for IntelliSense to work.
from tailwind-rn.
I must run
npm install tailwindcss
to have Tailwind CSS IntelliSense autocomplete feature, can I ignore this step?
You can run npx tailwindcss init
instead to make your tailwind.config.js file.
from tailwind-rn.
I must run
npm install tailwindcss
to have Tailwind CSS IntelliSense autocomplete feature, can I ignore this step?You can run
npx tailwindcss init
instead to make your tailwind.config.js file.
Before this, I have run npx tailwindcss init
and so I got tailwind.config.js
, but IntelliSense still not work and I got this error in the OUTPUT
of vscode(I tried restarting vscode):
And I check out doc of Tailwindcss IntelliSense, which says: In order for the extension to activate you must have tailwindcss installed and a Tailwind config file named tailwind.config.js in your workspace.
. So I try npm install tailwindcss
, and after restarting vscode, autocomplete works. So I guess maybe IntelliSense check package.json -> dependencies
, if "tailwindcss" in dependencies, IntelliSense works?
from tailwind-rn.
Seems you need to have it installed then. Note that the autocomplete will adhere to your tailwind configuration and not to tailwind-rn
's compatibility limitations. You can disable core plugins for this.
from tailwind-rn.
To make intellisense work in a tailwind-rn project, i.e.
style={tailwind('mb-1')}
I use the following:/* TailwindCSS */ "tailwindCSS.experimental.classRegex": ["tailwind\\('([^)]*)\\')", "'([^']*)'"]
this isn't working for me...
i have pasted the above in setting.json
My tailwind.js
import { create } from 'tailwind-rn';
import styles from '../styles.json';
const { tailwind, getColor } = create(styles);
export { tailwind, getColor };
My home.js
...
import { getColor, tailwind } from '../tailwind';
const home = () =>{
return(
<View>
<Text>hi there</Text>
<Text style={tailwind('mb-1')}>hi there</Text>
</View>
)
}
export default home
@tommulkins , @jonlambert or anyone could please resolve this
from tailwind-rn.
To make intellisense work in a tailwind-rn project, i.e.
style={tailwind('mb-1')}
I use the following:/* TailwindCSS */ "tailwindCSS.experimental.classRegex": ["tailwind\\('([^)]*)\\')", "'([^']*)'"]
this isn't working for me...
i have pasted the above in setting.json
My tailwind.js
import { create } from 'tailwind-rn'; import styles from '../styles.json'; const { tailwind, getColor } = create(styles); export { tailwind, getColor };
My home.js
... import { getColor, tailwind } from '../tailwind'; const home = () =>{ return( <View> <Text>hi there</Text> <Text style={tailwind('mb-1')}>hi there</Text> </View> ) } export default home
@tommulkins , @jonlambert or anyone could please resolve this
I currently use tailwind-react-native-classnames with the following regex settings in my project:
vscode/settings.json
{
/* TailwindCSS */
"tailwindCSS.experimental.classRegex": [
"tw`([^`]*)",
"`([^`]*)",
["tw.style\\(([^)]*)\\)", "'([^']*)'"]
]
}
I believe that last value in the array will do the trick, "'([^']*)'"
from tailwind-rn.
You need to open the VS Code setting file as a json. It should be under this Path (~/Library/Application Support/Code/User/settings.json)
Then if you're using "import tw from 'twrnc';"
and your code looks like style={tw'min-w-full '}
update the section of tailwind on your setting file as follows :
"tailwindCSS.classAttributes": [ "class", "className", "ngClass" ], "tailwindCSS.experimental.classRegex": ["style={tw\\('|\"([^'|\")]*)"], "tailwindCSS.experimental.configFile": null
from tailwind-rn.
Related Issues (20)
- [question] how to custom the theme of app? HOT 1
- [question] how to set the root font size? HOT 1
- How to use tailwind imports with react native- can tailwind be shortened to tw HOT 1
- Custom classes missing some styles HOT 1
- Blur support
- Typescript error: Property 'children' does not exist on type 'IntrinsicAttributes & Props' (TailwindProvider) HOT 1
- Error: Failed to parse declaration "textDecorationLine: overline"
- Does this work?
- Is TailwindCSS component available with this library?
- Can we have space-between ? HOT 1
- Unsupported Tailwind class, not responding on rect native HOT 5
- Unable to see changes after installation HOT 1
- Fix children prop type HOT 2
- Custom theme unknown or invalid utility HOT 1
- Bug: 'taildinwcss@latest' is not in this registry. HOT 1
- Is it possible to use prettier-plugin-tailwindcss with tailwind-rn? HOT 2
- Support react-native 0.71 gap proprety HOT 2
- npx create-tailwind-rn has stopped woprking for v3.0.1 HOT 1
- Adding optional "children" property to the TailwindProvider interface, to avoid TypeScript error. HOT 3
- is it possible to use it in react native storybook?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tailwind-rn.