Tailwind ରଙ୍ଗ ଜେନେରେଟର

ଗୋଟିଏ Hex କୋଡ୍‌ରୁ Tailwind CSS ର 50–950 ଯାଏ ୧୧ଟି ଶେଡ୍ ପାଲେଟ୍ ଓ କନଫିଗରେସନ କୋଡ୍ ତିଆରି କରେ

ଅଦ୍ୟତନ ସୂଚନାTailwind ରଙ୍ଗ ସୃଷ୍ଟି ଯୋଗ କରାଗଲା, ଗୋଟିଏ ରଙ୍ଗରୁ 11ଟି ସ୍ତରର ରଙ୍ଗ ଓ ସେଟିଂ କୋଡ୍ ପ୍ରସ୍ତୁତ କରନ୍ତୁଅଦ୍ୟତନ ତଥ୍ୟ ଦେଖନ୍ତୁ

ବିଶେଷତା

ଗୋଟିଏ ରଙ୍ଗରୁ ୧୧ଟି ଶେଡ୍ ସ୍ୱୟଂଚାଳିତ ଭାବେ

ଦିଆଯାଇଥିବା ରଙ୍ଗକୁ 500 ରେ ରଖି 50–950 ର ଗାଢ଼-ହାଲୁକା ଗଣନା କରେ

v3 ଓ v4 ଦୁଇ ଶୈଳୀ ସମର୍ଥିତ

config ଓ @theme ଲେଖିବା ଶୈଳୀକୁ ଟ୍ୟାବ୍‌ରେ ବଦଳାନ୍ତୁ

ପ୍ରତ୍ୟେକ ଶେଡ୍‌ର Hex କପି

ପ୍ରତ୍ୟେକ ରଙ୍ଗ ନମୁନାର ବଟନରୁ ଗୋଟି ଗୋଟି କରି ରଙ୍ଗ କୋଡ୍ କପି କରନ୍ତୁ

ଲେଖିବା ସଙ୍ଗେ ସଙ୍ଗେ ପାଲେଟ୍ ଅପଡେଟ୍

ଚଲାଇବା ବଟନ ବିନା ରଙ୍ଗ ପରଖି ତୁଳନା କରନ୍ତୁ

ବ୍ୟବହାର ବିଧି

ଆଧାର ରଙ୍ଗର Hex ଦିଅନ୍ତୁ

Hex କୋଡ୍ ଲେଖନ୍ତୁ, କିମ୍ବା ବାମ ପାର୍ଶ୍ୱର ରଙ୍ଗ ନମୁନାକୁ କ୍ଲିକ୍ କରି ରଙ୍ଗ ପିକରରୁ ବାଛନ୍ତୁ

ଆବଶ୍ୟକ ହେଲେ ରଙ୍ଗ ନାମ ଦିଅନ୍ତୁ

କୋଡ୍ ଭିତରେ ବ୍ୟବହାର ହେବା ରଙ୍ଗ ନାମ ଛୋଟ ଅକ୍ଷରରେ ଲେଖନ୍ତୁ। ଖାଲି ଥିଲେ primary ବ୍ୟବହାର ହେବ

୧୧ଟି ଶେଡ୍‌ର ନମୁନା ଦେଖନ୍ତୁ

50–950 ର ରଙ୍ଗ ନମୁନା ଓ Hex କୋଡ୍ ଦେଖି, ନମୁନାର କପି ବଟନରୁ ଗୋଟି ଗୋଟି କରି କପି କରନ୍ତୁ

ଆଉଟପୁଟ୍ ଶୈଳୀ ବାଛି କପି କରନ୍ତୁ

v3 କିମ୍ବା v4 ବାଛି "କୋଡ୍ କପି କରନ୍ତୁ" ଦ୍ୱାରା tailwind.config.js କିମ୍ବା CSS ଫାଇଲରେ ପେଷ୍ଟ କରନ୍ତୁ

ବ୍ୟବହାର ଉଦାହରଣ

ବ୍ରାଣ୍ଡ ରଙ୍ଗର ଗାଢ଼-ହାଲୁକା ତିଆରି

ବଟନ ହୋଭର ଓ ପୃଷ୍ଠଭୂମି ପାଇଁ ଦରକାରୀ ଶେଡ୍‌ଗୁଡ଼ିକ ଗୋଟିଏ ବ୍ରାଣ୍ଡ ରଙ୍ଗରୁ ସମାନ ଭାବେ ତିଆରି କରନ୍ତୁ

ମାନକ ପାଲେଟ୍‌ରେ ନଥିବା ରଙ୍ଗ ଯୋଡ଼ିବା

Tailwind ମାନକ ରଙ୍ଗରେ ନଥିବା ପ୍ରକଳ୍ପର ନିଜସ୍ୱ ରଙ୍ଗକୁ ୧୧ଟି ଶେଡ୍ ସହିତ କନଫିଗ ଫାଇଲରେ ଯୋଡ଼ନ୍ତୁ

v4 ର @theme ସେଟିଂ ତିଆରି

ସାଇଟର ମୁଖ୍ୟ ରଙ୍ଗରୁ Tailwind v4 ର CSS ଭେରିଏବଲ୍‌ଗୁଡ଼ିକ ଏକାଠି ଲେଖନ୍ତୁ

ଡିଜାଇନ ମକ୍‌ର ବାସ୍ତବାୟନ ପ୍ରସ୍ତୁତି

ମକ୍‌ରେ ନିର୍ଦ୍ଦିଷ୍ଟ ରଙ୍ଗରୁ ବାସ୍ତବାୟନ ପାଇଁ ୧୧ଟି ଶେଡ୍ କୋଡ୍ ପ୍ରସ୍ତୁତ କରି ଡିଜାଇନ ଟୁଲ୍‌କୁ ମଧ୍ୟ ଟ୍ରାନ୍ସଫର କରନ୍ତୁ

ମୌଳିକ ଜ୍ଞାନ

Tailwind ର 50–950 କଣ ବୁଝାଏ

Tailwind CSS ର ରଙ୍ଗରେ 50 ସବୁଠାରୁ ହାଲୁକା ଓ 950 ସବୁଠାରୁ ଗାଢ଼, ଏହିପରି ୧୧ଟି ସ୍ତରର ସଂଖ୍ୟା ଉଜ୍ଜ୍ୱଳତା ବୁଝାଏ, ଆଉ 500 ସେହି ରଙ୍ଗର ଆଧାର ହୁଏ। ଏହି ସଂଖ୍ୟା "bg-primary-500" କିମ୍ବା "text-primary-700" ପରି କ୍ଲାସ ନାମର ଶେଷରେ ଯୋଡ଼ି ବ୍ୟବହାର ହୁଏ।

50–300 ସ୍ତର：50–300 ସ୍ତରଗୁଡ଼ିକ ପୃଷ୍ଠଭୂମି ରଙ୍ଗ କିମ୍ବା ହାଲୁକା ଭରଣରେ ବେଶି ବ୍ୟବହାର ହେଉଥିବା ଉଜ୍ଜ୍ୱଳ ରଙ୍ଗ, ଯାହା ଉପରେ ଗାଢ଼ ଅକ୍ଷର ରଖିଲେ ମଧ୍ୟ ସହଜରେ ପଢ଼ାଯାଏ।
600–950 ସ୍ତର：600–950 ସ୍ତରଗୁଡ଼ିକ ବଟନ ହୋଭର ସମୟରେ କିମ୍ବା ଶୀର୍ଷକର ଅକ୍ଷର ରଙ୍ଗରେ ବେଶି ବ୍ୟବହାର ହେଉଥିବା ଗାଢ଼ ରଙ୍ଗ, ଯାହା ଧଳା ପୃଷ୍ଠଭୂମି ଉପରେ ମଧ୍ୟ ସ୍ପଷ୍ଟ ଦିଶେ।

v3 ଓ v4 ରେ ରଙ୍ଗ ବ୍ୟାଖ୍ୟା କରିବାର ପାର୍ଥକ୍ୟ

Tailwind CSS ର v3 ରେ ରଙ୍ଗ tailwind.config.js ର JavaScript ରେ ବ୍ୟାଖ୍ୟା କରାଯାଏ, ଆଉ v4 ରେ CSS ଫାଇଲର @theme ଭିତରେ CSS ଭେରିଏବଲ୍ ଭାବେ ବ୍ୟାଖ୍ୟା କରାଯାଏ। ଦୁଇଟି ଶୈଳୀରେ ହିଁ, ବ୍ୟାଖ୍ୟା କରାଯାଇଥିବା ରଙ୍ଗ "bg-primary-500" ପରି ସମାନ କ୍ଲାସ ନାମରେ ବ୍ୟବହାର କରାଯାଇପାରେ।

v3 ର ଲେଖିବା ଶୈଳୀ：v3 ର ଶୈଳୀରେ theme.extend.colors ଭିତରେ "primary: { 500: '#3B82F6' }" ପରି ରଙ୍ଗ ନାମ ଓ ସ୍ତରକୁ ନେଷ୍ଟ କରି ଲେଖାଯାଏ।
v4 ର ଲେଖିବା ଶୈଳୀ：v4 ର ଶୈଳୀରେ @theme ଭିତରେ "--color-primary-500: #3B82F6;" ପରି ରଙ୍ଗ ନାମ ଓ ସ୍ତରକୁ ହାଇଫେନରେ ଯୋଡ଼ି ଭେରିଏବଲ୍ ନାମ ଭାବେ ଲେଖାଯାଏ।