# @tw-in-js/typescript-plugin > TypeScript language service plugin that adds IntelliSense for tailwindjs Latest version **0.0.1** (published 2020-12-09) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install @tw-in-js/typescript-plugin pnpm add @tw-in-js/typescript-plugin yarn add @tw-in-js/typescript-plugin bun add @tw-in-js/typescript-plugin ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 0.0.1 | | Published | 2020-12-09 | | First published | 2020-12-09 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 15 | | Unpacked size | 227.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 42 | | Maintainers | sastan, lukejacksonn | | Keywords | TypeScript, tw-in-js, tailwind-in-js, tailwind | ## Links - npm: https://www.npmjs.com/package/@tw-in-js/typescript-plugin - Repository: https://github.com/tw-in-js/typescript-plugin - Homepage: https://github.com/tw-in-js/typescript-plugin#readme - Issues: https://github.com/tw-in-js/typescript-plugin/issues - npm.io page: https://npm.io/package/@tw-in-js/typescript-plugin ## Dependencies (15) - [np](https://npm.io/package/np.md) ^7.0.0 - [dlv](https://npm.io/package/dlv.md) ^1.1.3 - [nps](https://npm.io/package/nps.md) ^5.9.12 - [jest](https://npm.io/package/jest.md) ^26.1.0 - [eslint](https://npm.io/package/eslint.md) ^7.3.1 - [prettier](https://npm.io/package/prettier.md) ^2.0.5 - [typescript](https://npm.io/package/typescript.md) ^4.1.0 - [tailwindcss](https://npm.io/package/tailwindcss.md) ^2.0.1 - [@carv/esbundle](https://npm.io/package/@carv/esbundle.md) ^1.1.6 - [@carv/tsconfig](https://npm.io/package/@carv/tsconfig.md) ^1.3.0 - [@carv/jest-preset](https://npm.io/package/@carv/jest-preset.md) ^1.1.6 - [@carv/eslint-config](https://npm.io/package/@carv/eslint-config.md) ^1.6.0 - [@carv/prettier-config](https://npm.io/package/@carv/prettier-config.md) ^1.1.0 - [vscode-languageserver-types](https://npm.io/package/vscode-languageserver-types.md) ^3.13.0 - [typescript-template-language-service-decorator](https://npm.io/package/typescript-template-language-service-decorator.md) ^2.2.0 ## Alternatives - [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads - [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads - [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads - [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads - [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads ## Recent versions - 0.0.1 (latest) — 2020-12-09 ## README # @tw-in-js/typescript-plugin > TypeScript language service plugin that adds IntelliSense for tailwindjs [![MIT License](https://flat.badgen.net/github/license/tw-in-js/typescript-plugin)](https://github.com/tw-in-js/core/blob/main/LICENSE) [![Latest Release](https://flat.badgen.net/npm/v/@tw-in-js/typescript-plugin?icon=npm&label)](https://www.npmjs.com/package/@tw-in-js/typescript-plugin) [![Github](https://flat.badgen.net/badge/icon/tw-in-js%2Ftypescript-plugin?icon=github&label)](https://github.com/tw-in-js/typescript-plugin) --- - [Features](#features) - [Installation](#installation) - [Usage](#usage) - [Configuration](#configuration) - [Contribute](#contribute) - [License](#license) ## Features Provides editor support for ```tw`...```` tagged template syntax including: - Autocomplete for tailwind, beamwind and oceanwin classes - Warnings on unknown classes - Quick fixes for misspelled property names. ## Installation ```sh npm install --save-dev @tw-in-js/typescript-plugin ``` ## Usage This plugin requires TypeScript 2.4 or later. It can provide intellisense in both JavaScript and TypeScript files within any editor that uses TypeScript to power their language features. This includes [VS Code](https://code.visualstudio.com), [Sublime with the TypeScript plugin](https://github.com/Microsoft/TypeScript-Sublime-Plugin), [Atom with the TypeScript plugin](https://atom.io/packages/atom-typescript), [Visual Studio](https://www.visualstudio.com), and others. ### With VS Code Just install the [VS Code tailwindjs extension](https://github.com/tw-in-js/core/packages/vscode). This extension adds syntax highlighting and IntelliSense for styled components in JavaScript and TypeScript files. If you are using a [workspace version of TypeScript](<(https://code.visualstudio.com/Docs/languages/typescript#_using-newer-typescript-versions)>) however, you must manually install the plugin along side the version of TypeScript in your workspace. Then add a `plugins` section to your [`tsconfig.json`](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html) or [`jsconfig.json`](https://code.visualstudio.com/Docs/languages/javascript#_javascript-project-jsconfigjson) ```json { "compilerOptions": { "plugins": [ { "name": "@tw-in-js/typescript-plugin" } ] } } ``` Finally, run the `Select TypeScript version` command in VS Code to switch to use the workspace version of TypeScript for VS Code's JavaScript and TypeScript language support. You can find more information about managing typescript versions [in the VS Code documentation](https://code.visualstudio.com/Docs/languages/typescript#_using-newer-typescript-versions). ### With Sublime This plugin works with the [Sublime TypeScript plugin](https://github.com/Microsoft/TypeScript-Sublime-Plugin). And configure Sublime to use the workspace version of TypeScript by [setting the `typescript_tsdk`](https://github.com/Microsoft/TypeScript-Sublime-Plugin#note-using-different-versions-of-typescript) setting in Sublime: ```json { "typescript_tsdk": "/path/to/the/project/node_modules/typescript/lib" } ``` Finally add a `plugins` section to your [`tsconfig.json`](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html) or [`jsconfig.json`](https://code.visualstudio.com/Docs/languages/javascript#_javascript-project-jsconfigjson) and restart Sublime. ```json { "compilerOptions": { "plugins": [ { "name": "@tw-in-js/typescript-plugin" } ] } } ``` ### With Atom This plugin works with the [Atom TypeScript plugin](https://atom.io/packages/atom-typescript). Then add a `plugins` section to your [`tsconfig.json`](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html) or [`jsconfig.json`](https://code.visualstudio.com/Docs/languages/javascript#_javascript-project-jsconfigjson) and restart Atom. ```json { "compilerOptions": { "plugins": [ { "name": "@tw-in-js/typescript-plugin" } ] } } ``` To get sytnax highlighting for styled strings in Atom, consider installing the [language-babel](https://atom.io/packages/language-babel) extension. ### With Visual Studio This plugin works [Visual Studio 2017](https://www.visualstudio.com) using the TypeScript 2.5+ SDK. Then add a `plugins` section to your [`tsconfig.json`](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html). ```json { "compilerOptions": { "plugins": [ { "name": "@tw-in-js/typescript-plugin" } ] } } ``` Then reload your project to make sure the plugin has been loaded properly. Note that `jsconfig.json` projects are currently not supported in VS. ## Configuration ### Tags This plugin adds IntelliSense to any template literal [tagged](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) with `tw`, `ow` or `bw`: ```js import { bw } from 'beamwind' bw` sm:hover:( bg-black text-white ) md:(bg-white hover:text-black) ` ``` You can enable IntelliSense for other tag names by configuring `"tags"`: ```json { "compilerOptions": { "plugins": [ { "name": "@tw-in-js/typescript-plugin", "tags": ["tw", "cx"] } ] } } ``` Now strings tagged with either `tw` and `cx` will have IntelliSense. ## Contribute Thanks for being willing to contribute! > This project is free and open-source, so if you think this project can help you or anyone else, you may [star it on GitHub](https://github.com/tw-in-js/core). Feel free to [open an issue](https://github.com/tw-in-js/core/issues) if you have any idea, question, or you've found a bug. **Working on your first Pull Request?** You can learn how from this _free_ series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github) We are following the [Conventional Commits](https://www.conventionalcommits.org) convention. ### Develop > Ensure you run at least Node v14. Clone the repository and cd into the project directory. Run `yarn install && yarn build`. - `yarn test`: Run test suite including linting - `yarn format`: Ensure consistent code style - `yarn build`: Build the package - `yarn release`: To publish the package ### Manual testing the Language service plugin You can check manually language service plugin features with our example project. ``` yarn build cd dist yarn link cd project-fixtures/react-apollo-prj yarn install yarn link @tw-in-js/typescript-plugin code . # Or launch editor/IDE what you like ``` Of course, you can use other editor which communicates with tsserver . ## License [MIT](https://github.com/tw-in-js/typescript-plugin/blob/main/LICENSE) --- _Source: https://npm.io/package/@tw-in-js/typescript-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._