https://github.com/muhajirdev/vscode-tailwind-styled-snippets

Time saver for tailwindcss + styled components / emotion user who use vscode
https://github.com/muhajirdev/vscode-tailwind-styled-snippets

emotion react styled-components tailwindcss vscode vscode-extension vscode-snippets

Last synced: 2 months ago
JSON representation

Time saver for tailwindcss + styled components / emotion user who use vscode

• Host: GitHub
• URL: https://github.com/muhajirdev/vscode-tailwind-styled-snippets
• Owner: muhajirdev
• License: mit
• Created: 2018-10-04T12:28:22.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T17:49:48.000Z (about 1 year ago)
• Last Synced: 2023-12-15T18:56:33.368Z (about 1 year ago)
• Topics: emotion, react, styled-components, tailwindcss, vscode, vscode-extension, vscode-snippets
• Homepage: https://marketplace.visualstudio.com/items?itemName=muhajirframe.tailwind-styled-snippets
• Size: 2.72 MB
• Stars: 12
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vscode-tailwind-styled-snippets

## Installation

Follow the [installation steps here](https://marketplace.visualstudio.com/items?itemName=muhajirdev.tailwind-styled-snippets) and reload VSCode

## Usage

![demo](./docs/demo.gif)

Simply write `tail`

for

```

const Component = styled.div`

 ${tw``};

`

```

and `tailc` for

```

const className = css`

 ${tw``};

`

```

## Who should use this?

- [Styled Components User](https://styled-components.com/docs/faqs)

- [EmotionJS User](https://github.com/emotion-js/emotion)

- And maybe more?

## Where does this snippet runs?

- `.js`

- `.jsx`

- `.ts`

- `.tsx`

## Release Notes

### 0.1.0

Added support for `.jsx`, and `.tsx`

### 0.0.1

Initial release

## For more information

- [Github](https://github.com/muhajirdev/vscode-tailwind-styled-snippets)

- Got a question? [Submit an issue](https://github.com/muhajirdev/vscode-tailwind-styled-snippets/issues/new)

## Contributing

- [Submit an idea](https://github.com/muhajirdev/vscode-tailwind-styled-snippets/issues/new)

- Make a pull request

## Related

- [vscode-react-emotion](https://github.com/muhajirdev/vscode-react-emotion)

- [react-tailwind-emotion-starter](https://github.com/muhajirdev/react-tailwind-emotion-starter) A React + Tailwind + EmotionJs starter based on [create-react-app](https://github.com/facebook/create-react-app)

- [gatsby-plugin-tailwindcss](https://github.com/muhajirdev/gatsby-plugin-tailwincss)

- [gatsby-tailwind-emotion-starter](https://github.com/muhajirdev/gatsby-tailwind-emotion-starter)

**Enjoy!**