eslint-plugin-tailwindcss
cva
Our great sponsors
eslint-plugin-tailwindcss | cva | |
---|---|---|
11 | 16 | |
1,288 | 5,192 | |
- | - | |
8.3 | 7.4 | |
26 days ago | 14 days ago | |
JavaScript | TypeScript | |
MIT License | Apache License 2.0 |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
eslint-plugin-tailwindcss
-
Recommended Linters
eslint-plugin-tailwindcss - Rules enforcing best practices and consistency using Tailwind CSS.
-
Has anyone figured out how to apply the eslint tailwindcss plugin to blade files?
I'm talking about this plugin: https://github.com/francoismassart/eslint-plugin-tailwindcss that helps with ordering your classnames correctly and adds a bunch of other useful checks.
-
Downsides to using computed properties as CSS to form classes?
For one, you can't take advantage of classnames order.
- Typescript + tailwind = typewind (first impressions)
- what is your favorite way/framework to write CSS
-
Just update my Next.js Boilerplate to Next.js 13 and Tailwind CSS 3.2. Thank to Vercel team work and incremental adoption, only one breaking change.
I'm already using: https://www.npmjs.com/package/eslint-plugin-tailwindcss. So, it also sort classnames in JSX Code
-
Why I personally hate Tailwind
Ever heard of eslint-plugin-tailwindcss?
-
Streamlining your Tailwind CSS workflow with ESLint + Prettier
eslint-plugin-tailwindcss for ESLint
-
Write better, cleaner and more understandable Tailwind CSS code
So, I have found a better alternative in ESLint ecosystem: https://www.npmjs.com/package/eslint-plugin-tailwindcss
-
My tailwind automation setup
You can find this Tailwind ESLint plugin on NPM
cva
-
Use postcss-cva to generate cva method
cva.style
-
Tailwind vs. Semantic CSS
* use cva https://github.com/joe-bell/cva to style generic ui components (like buttons) to archive same grouping as in semantic css
- 5 React Libraries to Level Up your Projects in 2023
-
How do you design Button in React js?
Highly recommended with this: https://github.com/joe-bell/cva
-
What am I missing out about Tailwind?
Yes, and a library like https://github.com/joe-bell/cva makes this a breeze. See https://cva.style/docs/getting-started#your-first-component for an example
-
Building a prop-based, type-safe Tailwind with vanilla-extract
There is also class variance authoriy
- Konsta UI – Mobile UI Components Built with TailwindCSS
- which way do you prefer for styling ?
-
Conditional styling reusable components
https://github.com/joe-bell/cva is great for this
-
Introducing DecaUI
Also have you heard of class variance authority? https://github.com/joe-bell/cva; personally looked into stitches & vanilla-extract but i'm preferring the simplicity of this package the most.
What are some alternatives?
twin.macro - 🦹♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.
react-cva - Class Variance Authority helper for react
kutty - Kutty is a tailwind plugin for building web applications. It has a set of accessible and reusable components that are commonly used in web applications.
vanilla-extract - Zero-runtime Stylesheets-in-TypeScript
shopify-theme-lab - Shopify theme development environment using Liquid, Vue and Tailwind CSS. Built on top of Shopify CLI 🧪
tailwindcss-classnames - Functional typed classnames for TailwindCSS
prettier-plugin-tailwindcss - A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.
stylemapper - Flexible utility to create styled and type-safe React components
material-tailwind - @material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design.
konsta - Mobile UI components made with Tailwind CSS
notus-react - Notus React: Free Tailwind CSS UI Kit and Admin
stitches - [Not Actively Maintained] CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.