why aren't the native css "text-align: start" and end used?

[EmeraldSnorlax]

the current implementation doesn't work when aligning text to the start or the end based on direction. the rules seem to conflict with each other.

what's the reasoning behind using this:

const utilities = () => ({
  '[dir="rtl"] .text-start': { 'text-align': 'right' },
  '[dir="rtl"] .text-end': { 'text-align': 'left' },
  ':not([dir="rtl"]) .text-end': { 'text-align': 'right' },
  ':not([dir="rtl"]) .text-start': { 'text-align': 'left' },
});

module.exports = utilities;

when surely this will suffice?

  '.text-start': { 'text-align': 'start' },
  '.text-end': { 'text-align': 'end' },

see these videos

https://user-images.githubusercontent.com/43452521/142731702-99b6b9b1-0581-446e-b6c3-728538f71880.mp4

https://user-images.githubusercontent.com/43452521/142731701-193dfd05-381b-462b-9540-3a59c4e1566a.mp4

im not sure if this is related to #25, but it seems like it might be

as a work around, ive put this in my Tailwind.postcss file:

@tailwind base;
@tailwind components;
@tailwind utilities;
  
@layer utilities {
  .text-start {
    text-align: start !important;
  }
  .text-end {
    text-align: end !important;
  }
}

[brahimbim]

Hello I can fix that by adding body element before :not() 'body:not([dir="rtl"]) .text-end': { 'text-align': 'right' },

Note: it is necessary to add dir attribute in the body element

[20lives]

hi, sorry for the late responese. CSS logical properties are not widely supported by browsers yet.

since both give the same expected results I can guess it's fine to keep it that way.

maybe I can add a configuration flag to use the logical properties instead.

[bakura10]

Next version of Tailwind have native utiltiies for text-align, so maybe this can be removed from this package? In all cases, text-align start/end are supported since a very long time (according to CanIUse, Safari 3, so maybe it is safe to remove at least this one :).