Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot create 1px borders with border-s and border-e #16

Closed
mattlangeman opened this issue Dec 29, 2020 · 9 comments
Closed

Cannot create 1px borders with border-s and border-e #16

mattlangeman opened this issue Dec 29, 2020 · 9 comments

Comments

@mattlangeman
Copy link

First, thanks for this tailwind plugin. I like the approach for making tailwind support right to left languages.

I ran into an issue creating 1px width borders using border-s and border-e.

In tailwind I can use border-l to create a 1px border on the left of a container. Similar with border-r. However, border-s and border-e does not behave this way.

My options are:

  • Create 2px border with border-s-2
  • Use this to set border and remove other sides "border border-e-0 border-t-0 border-b-0"
@20lives
Copy link
Owner

20lives commented Dec 29, 2020

this should work, let me check it.

@20lives
Copy link
Owner

20lives commented Dec 29, 2020

Everything seems to be in place:
image

Can you upload a demo or screenshot of the problem?

@mattlangeman
Copy link
Author

Interesting. I looked at the generated stylesheet and found the following rules:

.border-s-0 {
  border-inline-start-width: 0px;
}

.border-e-2 {
  border-inline-end-width: 2px;
}

.border-s-2 {
  border-inline-start-width: 2px;
}

.border-e-4 {
  border-inline-end-width: 4px;
}

.border-s-4 {
  border-inline-start-width: 4px;
}

.border-e-8 {
  border-inline-end-width: 8px;
}

.border-s-8 {
  border-inline-start-width: 8px;
}

.border-e-DEFAULT {
  border-inline-end-width: 1px;
}

.border-s-DEFAULT {
  border-inline-start-width: 1px;
}

I'm not sure why I'm seeing -DEFAULT for the 1px width rules.

@20lives
Copy link
Owner

20lives commented Dec 29, 2020

what versions of tailwindcss and tailwindcss-rtl are you using?

@mattlangeman
Copy link
Author

tailwindcss: 2.0.1
tailwindcss-rtl: 0.7.1

I am using django-tailwind but my understanding is that it is essentially a wrapper around the npm stuff.

@20lives
Copy link
Owner

20lives commented Dec 29, 2020

Found it, this seems to be some incompatibility with v2, I will try to fix this soon.
Thanks.

@20lives
Copy link
Owner

20lives commented Dec 29, 2020

If this is critical you can downgrade to 1.9.6 for now.

@mattlangeman
Copy link
Author

Thanks. This is not critical. My new workaround is just using border-s-DEFAULT or border-e-DEFAULT. I see this affects other utilities. In my digging I ran into this merged pull request which I'm guessing you also found.

@20lives
Copy link
Owner

20lives commented Jan 3, 2021

pretty simple fix, should have done this earlier.

thanks.

@20lives 20lives closed this as completed Jan 7, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants