shopify-theme-lab
eslint-plugin-tailwindcss
| shopify-theme-lab | eslint-plugin-tailwindcss | |
|---|---|---|
| 6 | 12 | |
| 743 | 1,476 | |
| 0.8% | - | |
| 0.0 | 8.2 | |
| 8 months ago | 5 days ago | |
| JavaScript | JavaScript | |
| MIT License | MIT License |
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.
shopify-theme-lab
-
Adding a Vue App to Shopify
Shopify Theme Lab This workflow tooling uses webpack bundler with Vue to generate Shopify theme code. It may help you get Vue bootstrapped into a theme for you.
-
Awesome Shopify Resources for 2022
7. Shopify Theme Lab
-
Shopify CLI Error
Have you checked out Theme Lab? If you are having any underlying issues non-related to your setup this would iron them out. I'd try to setup a dummy theme and see if its something terminal/CLI related or something misconfigured on your partner end/shopify side.
-
Converting Theme from Slate v0 to Online Store 2.0
You should check out UI crooks theme lab. I've taken 2 stores built with Slate v0 and upgraded them to a modern workflow where I was able to drop the whole repo for the old v0 into UI crooks and sort of sunset the old method of using Slate. Online Store 2.0 is not equivalent to Slate as you are suggestion (theme.js, SASS). Slate was an opinionated set of tools to build a theme for Shopify. Shopify CLI is more of a tool to communicate with your local machine and the remote server. The actual tooling is now left up to you. Back when Slate got started jQuery ruled the world. Shopify is backing away from telling developers the specifics of how they will build stores. Shopify also has taken a lame approach to this evergreen web. I get it but they are espousing a belief due to the underlying issue with the app ecosytem being incompatible with modern web development. They did include app sections to help. But still.
- Another performance list of shopify themes by speed
-
Modern Shopify theme development
In the end, I said: "Fine, I'll do it myself". That's pretty much how the Shopify Theme Lab project started. Of course, the road to the finished product was a little bit more complicated, but that's another story.
eslint-plugin-tailwindcss
-
Tailwind CSS for frontend teams: From settings to rules
However, after a little more searching, we found this plugin, which is maintained by the community and has slightly more rules than the official plugin's class name ordering rules. Again, most of the rules support auto-correction. Here are the rules the team chose to use
-
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
What are some alternatives?
dawn - Shopify's first source available reference theme, with Online Store 2.0 features and performance built-in.
cva - Class Variance Authority
shopify-next.js-tailwind - Learn the Shopify + Next.js + Tailwind CSS Stack! SWR, Hydrogen, + more
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.
shopify-bare - Shopify starter theme that provides Javascript modules(ES6 and node_modules), tree-shaking, Live Reloading/ Hot module reloading, Tailwind Css w\ nesting & imports purges unused CSS, minify your built files, compress your images, and use quick commands to develop easier.
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.
hydrogen - Hydrogen lets you build faster headless storefronts in less time, on Shopify.
prettier-plugin-tailwindcss - A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.
shopify-node-mongodb-next-app - WIP | An embedded app starter template with all the required stuff hooked up.
material-tailwind - @material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design.
HULL - 💀 Headless Shopify Starter – powered by Next.js + Sanity.io
notus-react - Notus React: Free Tailwind CSS UI Kit and Admin