𝗧𝗵𝗲 𝗥𝗲𝗮𝗹 𝗥𝗲𝗮𝘀𝗼𝗻 𝗘𝘃𝗲𝗿𝘆𝗼𝗻𝗲 𝗜𝘀 𝗙𝗶𝗴𝗵𝘁𝗶𝗻𝗴 𝗔𝗯𝗼𝘂𝘁 𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱 𝗖𝗦𝗦 𝘃𝟰

Tailwind CSS v4 చర్చ అంతటా కనిపిస్తోంది. చాలా మంది తప్పు విషయం గురించి వాదిస్తున్నారు.

అసలు ప్రశ్న utility classes వర్సెస్ inline styles గురించి కాదు. మీ స్టైలింగ్ ఎక్కడ ఉంటుంది మరియు దానికి అయ్యే మానసిక శ్రమ (mental cost) ఎవరికి ఉంటుంది అనేదే అసలు విషయం.

Tailwind v4 కాన్ఫిగరేషన్‌ను మీ CSS ఫైల్‌లోకి మారుస్తుంది. మీరు JavaScript config ఫైల్‌కు బదులుగా @theme ని ఉపయోగిస్తారు. ఇది workflowలను మరింత స్పష్టంగా చేస్తుంది.

కానీ ఈ వివాదానికి ఇదే కారణం కాదు. v4 రెండు వేర్వేరు పద్ధతులను (patterns) ఉపయోగించడం సులభతరం చేయడం వల్ల ఈ వివాదం మొదలైంది.

Pattern 1: మీ కాంపోనెంట్స్‌లో Utility classes. మీరు నేరుగా మీ HTML లేదా JSXలో క్లాస్‌లను రాస్తారు. ఇది ఒక ఎలిమెంట్ ఎలా కనిపిస్తుందో మీకు ఖచ్చితంగా చెబుతుంది.

Pattern 2: @apply విధానం. మీరు CSS ఫైల్‌లో .alert లేదా .alert--error వంటి semantic క్లాస్‌లను సృష్టిస్తారు. ఇది ఒక ఎలిమెంట్ ఏమిటో మీకు చెబుతుంది.

రెండు పద్ధతులు పనిచేస్తాయి. ఏదీ తప్పు కాదు. అవి వేర్వేరు సిద్ధాంతాలను (philosophies) అనుసరిస్తాయి.

Group A 'co-location'ను నమ్ముతుంది. అంతా ఒకే చోట ఉంటుంది. Group B 'semantic names'ను నమ్ముతుంది. అవి వాటి ఉద్దేశ్యాన్ని వివరించే పేర్లు కావాలని కోరుకుంటారు.

ఒక డిజైనర్ ఎర్రర్ కలర్‌ను ఎరుపు నుండి నారింజకు మార్చినప్పుడు, Group A కోడ్ ఫైల్‌ల అంతటా వెతుకుతుంది. Group B ఒక CSS ఫైల్‌లో ఒక లైన్‌ను మారుస్తుంది.

Tailwind v4 వల్ల @apply వాడటం మరింత సహజంగా అనిపిస్తుంది. ఇది ఉద్రిక్తతను పెంచుతోంది.

మీ టీమ్ పరిమాణాన్ని బట్టి ఎలా ఎంచుకోవాలో ఇక్కడ ఉంది:

  • Small teams: Utility classes ఉపయోగించండి. క్లాస్‌లకు పేర్లు పెట్టడానికి మీరు సమయం వృథా చేయనవసరం లేదు. అందరూ ఒకే ఫైల్‌లపై పనిచేసినప్పుడు మీరు వేగంగా ముందుకు వెళ్లగలరు.

  • Component libraries: @apply లేదా CSS variables ఉపయోగించండి. మీ అంతర్గత design tokens గురించి మీ వినియోగదారులకు తెలియాల్సిన అవసరం లేదు.

  • Large companies: ఒక hybrid model ఉపయోగించండి. semantic క్లాస్‌లను ఒక design system టీమ్ చూసుకోనివ్వండి. అప్లికేషన్ డెవలపర్లు వేగవంతమైన లేఅవుట్‌ల కోసం utilities ఉపయోగించనివ్వండి.

పొడవైన క్లాస్ స్ట్రింగ్స్‌ను చదవకుండా ఉండటానికి మాత్రమే @applyని ఉపయోగించకండి. అది వ్యూహం కాదు, అది తప్పించుకోవడం మాత్రమే.

గట్టిగా విమర్శించే వారు తరచుగా ఫ్రేమ్‌వర్క్‌తో కాకుండా తమ టూల్స్‌తో పోరాడుతుంటారు. మీ ఎడిటర్‌లో IntelliSense లేకపోయినా లేదా మీ టీమ్‌లో design token సిస్టమ్ లేకపోయినా, workflow సరిగ్గా లేనట్లు అనిపిస్తుంది.

ఫ్రేమ్‌వర్క్‌ను నిందించే ముందు మీ workflowను సరిదిద్దుకోండి.

Tailwind v4 ఒక శక్తివంతమైన విడుదల. CSS-first config మెరుగ్గా ఉంది. ఈ చర్చ కేవలం టీమ్‌లు స్పష్టమైన నిర్ణయాలు తీసుకోవాలని సూచించే ఒక సంకేతం మాత్రమే.

ఒక నిర్ణయం తీసుకోండి. దానిని డాక్యుమెంట్ చేయండి. ముందుకు సాగండి.

మీ టీమ్ విధానం ఏమిటి? మీరు utility classes వాడుతున్నారా లేదా @apply వాడుతున్నారా?

Source: https://dev.to/enjoy_kumawat/the-real-reason-everyones-fighting-about-tailwind-css-v4-4o0g