Tailwind intellisense support #78

Activity

1. jaredh159 commented on Nov 4, 2021

   

   jaredh159

   on Nov 4, 2021

   Owner

   More actions

   I don't know honestly, but it shouldn't be too hard to come up with some regexes that work, for instance (not tested)

   "tailwindCSS.experimental.classRegex": [
     "tw`([^`]*)",
     "tw\\.style\\(([^)]*)\\)",
   ]
   

   etc... if you get it working, can you report back what you used?

   👍React with 👍3Reacted by Ricky Almeida, Alfonso Cartes and Niklas Grewe
2. axeldelafosse commented on Nov 5, 2021

   

   axeldelafosse

   on Nov 5, 2021

   More actions

   I'm solving this by creating my own design system (View, Text and more) where the components are taking a tw prop.

   Then you can add tw to Tailwind CSS: Class Attributes VS Code extension setting to get IntelliSense working!

   For example:

   import { View, Text } from 'app/design-system';
   
   export function HelloWorld() {
     return (
       <View tw="flex-1 justify-center items-center bg-white dark:bg-black">
         <Text tw="text-black dark:text-white">
           Hello, World!
         </Text>
       </View>
     );
   }
   

   🚀React with 🚀3Reacted by Tatis, Mike Osterhout and Chandan Kumar Mandal
3. rickyalmeidadev commented on Nov 11, 2021

   

   rickyalmeidadev

   on Nov 11, 2021

   More actions

   I don't know honestly, but it shouldn't be too hard to come up with some regexes that work, for instance (not tested)

   "tailwindCSS.experimental.classRegex": [
     "tw`([^`]*)",
     "tw\\.style\\(([^)]*)\\)",
   ]
   

   etc... if you get it working, can you report back what you used?

   I've been using it for a few weeks and it's been working perfectly.

   👍React with 👍1Reacted by rohit-32
4. nicholaswhittle commented on Nov 11, 2021

   

   nicholaswhittle

   on Nov 11, 2021

   Author

   More actions

   Great, my use case is getting it to work with emacs which isn't working with the same regex expression. When i figure it out il post it here.
5. jaykay-p commented on Nov 13, 2021

   

   jaykay-p

   on Nov 13, 2021

   More actions

   @nicwhitts
   I ran into the same problem. I added classRegex in settings.json, but inteliisense didnt work.

   I got it working after installing tailwindcss and postcss 8 dependencies.
   Also, ran npx tailwindcss init command to create default tailwind.config.js in the root.

   👍React with 👍2Reacted by Daniel Egerev and Darwin
6. Pedromdsn commented on Nov 13, 2021

   

   Pedromdsn

   on Nov 13, 2021

   More actions

   Estou resolvendo isso criando meu próprio sistema de design ( View, Texte mais), onde os componentes estão tomando uma twprop.

   Então você pode adicionar twa Tailwind CSS: Class Attributesconfiguração de extensão do VS Code para fazer o IntelliSense funcionar!

   Por exemplo:

   import { View, Text } from 'app/design-system';
   
   export function HelloWorld() {
     return (
       <View tw="flex-1 justify-center items-center bg-white dark:bg-black">
         <Text tw="text-black dark:text-white">
           Hello, World!
         </Text>
       </View>
     );
   }
   

   Great, the other alternatives don't work for me and that was going to be 10/10 to dispense with the workarounds.

   👍React with 👍1Reacted by Axel Delafosse
7. ahmed-rezk-dev commented on Nov 17, 2021

   

   ahmed-rezk-dev

   on Nov 17, 2021

   More actions

   I was looking to do the same. I found this solution. I use Neovim and it works great.

   For VScode:

   "scss.validate": false,
   "editor.quickSuggestions": {
       "strings": true
   },
   "editor.autoClosingQuotes": "always",
   "tailwindCSS.experimental.classRegex": [
       "tw`([^`]*)", // tw`...`
       "tw=\"([^\"]*)", // <div tw="..." />
       "tw={\"([^\"}]*)", // <div tw={"..."} />
       "tw\\.\\w+`([^`]*)", // tw.xxx`...`
       "tw\\(.*?\\)`([^`]*)" // tw(Component)`...`
   ],
   "tailwindCSS.includeLanguages": {
     "typescript": "javascript",
     "typescriptreact": "javascript"
   }
   

   For Neovim LSP:

   require"lspconfig".tailwindcss.setup {
     settings = {
       tailwindCSS = {
         experimental = {
           classRegex = {
             "tw`([^`]*)", -- tw`...`
             "tw=\"([^\"]*)", -- <div tw="..." />
             "tw={\"([^\"}]*)", -- <div tw={"..."} />
             "tw\\.\\w+`([^`]*)", -- tw.xxx`...`
             "tw\\(.*?\\)`([^`]*)"
           }
         }
       }
     }
   }
   

   Source: https://githubmemory.com/repo/kabouzeid/nvim-lspinstall/issues/45

   👍React with 👍4Reacted by Alfonso Cartes, Gerardo Torres, Bryant dos Anjos and Chris Dosé

   ❤️React with ❤️2Reacted by Chris Dosé and Tommy Kärnström
8. arnabtarwani commented on Dec 3, 2021

   

   arnabtarwani

   on Dec 3, 2021

   More actions

   You could also add style in the extensions under TailwindCSS extension Tailwind CSS IntelliSense in VS Code Settings (UI)

   

   👍React with 👍5Reacted by Rohini Aru, Kelsey Edelstein, Chandan Kumar Mandal, Tạ Trường and N8

   🎉React with 🎉2Reacted by Kelsey Edelstein and N8
9. Repository owner locked and limited conversation to collaborators on Feb 1, 2022
10. jaredh159

    converted this issue into a discussion #124 on Feb 1, 2022