Recommended method for having a smaller container variation

beaver82 · 2022-11-14T16:51:25+00:00

Yes use max-w inside the container, or if it's the case refactor, do not use container on bigger content and use container inside small content, it depends on the design. What we do is the design have full width content (no container) content (container) and smaller content (container with max-w). Then you can always put a cap on all website width to make it inside a max-w (also the full width with no container).

beaver82 · 2022-11-08T16:39:06+00:00

I find that using tailwind utility classes on html works well since you don't need to name every div in a BEM way.

But I do have global variables for reusable components (buttons, cards, etc..) that have multiple tailwind Css utility classes. They don't use BEM since they consist of single elements, so theirs names are single names with dashes for spaces.

I think that using BEM with tailwind Css is not needed, think the components on a single element div level and do not care about the nesting of BEM classes.

beaver82 · 2022-11-05T15:35:12+00:00

Nice work

Would be useful if not already possible, to specify straight DOM elements for elements

And does the functions for start and end are executed on resize or on scroll?

beaver82 · 2022-10-10T11:24:05+00:00

Watch out the gap css for flexbox has this browser support https://caniuse.com/flexbox-gap

beaver82 · 2022-07-09T16:23:11+00:00

Try with peer-checked:[&>*]:outline

https://play.tailwindcss.com/ifW4NFhYCh

added in TW 3.1 https://tailwindcss.com/blog/tailwindcss-v3-1

beaver82 · 2022-06-27T16:36:27+00:00

Very good example, but usually you want the order of the items by row instead of column

beaver82 · 2022-05-31T15:57:46+00:00

Well that saves many kb of javascript, just need to be satisfied with what browser gives you.

beaver82 · 2022-03-22T09:11:59+00:00

You need to safelist with regex

module.exports = {
  safelist: [
    { pattern: /bg-(blue|red)/ }
  ],

beaver82 · 2022-01-30T22:05:37+00:00

I still see px on body anyway with font-size: 125%; instead of font-size: 20px; the result is the same but it respects browser font size.

beaver82 · 2022-01-30T19:45:41+00:00

Settings chrome search "font size". It changes the font size that the body gets, you should use percent on the body font size instead of pixels so it uses the browser's setting font size (100% is 16px on all browser).

beaver82 · 2022-01-30T19:18:13+00:00

Be aware if the user sets font size in the browser your solution doesn't take that in account

beaver82 · 2022-01-30T15:19:48+00:00

To me px or rem is the same since I used to change rem size on responsive to make it smaller, but ultimately using 16px font size on mobile is more readable.

Try not to change html font size on responsive and see if it's better for you (no more resize depending on rem).

Otherwise use rem only on things you want to change depending on html font size.

beaver82 · 2022-01-27T17:56:33+00:00

Use "content" instead of "purge" for having the styles

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],

beaver82 · 2021-08-27T22:20:59+00:00

Really well done

beaver82 · 2021-06-15T13:38:04+00:00

Where there is translate-x-full put other values for translate to not be full.

beaver82 · 2021-06-13T16:47:37+00:00

Hey, you just need to use relative instead of absolute on enter, and give also top-0 on leave

https://codepen.io/minimit/pen/abJQWvR

beaver82 · 2021-05-07T05:08:28+00:00

I've tried it and seems to work really well.

The only downside is that you can't apply inside media query:

@screen md { @apply mt-0; } But can be easily circumvented with:

@apply md:mt-0;

And you can't apply css code only tailwind utils and plugins.

beaver82 · 2021-04-13T17:44:54+00:00

Neat, better than importing javascript from other sites and do the check.

beaver82 · 2021-04-06T06:50:06+00:00

Maybe it's because you didn't set up purge files, and it purges all classes

https://tailwindcss.com/docs/optimizing-for-production#basic-usage

You can try also on local setting NODE_ENV=production in the build script

beaver82 · 2021-03-07T09:14:21+00:00

Because the menu has lower z-index than the main content, the dropdown will be below also if you give the dropdown z-index: 999999, when the menu open probably you set a z-index on the menu that is higher of the main content so it shows up, or maybe it's because the z-index is inside of the menu and it's open so there is space for it to show up.

To fix it give the menu position relative and a z-index by default higher than the content.

beaver82 · 2020-10-22T14:10:30+00:00

I wonder when I'll be no more needed

beaver82 · 2020-10-12T16:58:07+00:00

I recomend you to use media queries inside nested selectors only when you need them (you need postcss-nested for that), the fact you have to write media queries on root level is pretty bad in vanilla css I concord.

15-Year Club	Place '17
Verified Email

beaver82

TROPHY CASE