All language subtitles for 002 Installing Tailwind CSS_en

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
ceb Cebuano
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
my Myanmar (Burmese)
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian
pl Polish
pt-BR Portuguese (Brazil)
pt Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian Download
rm Romansh
nyn Runyakitara
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:03,000 --> 00:00:06,059 I mentioned that we'll use Tailwind 2 00:00:06,059 --> 00:00:08,506 CSS for styling our website, 3 00:00:08,594 --> 00:00:10,951 so in this video we'll install 4 00:00:10,951 --> 00:00:12,523 it into our project. 5 00:00:12,601 --> 00:00:14,774 We'll need these three packages, 6 00:00:14,774 --> 00:00:16,471 that I'll copy from here. 7 00:00:16,539 --> 00:00:19,643 Then we can go back to Visual Studio Code, 8 00:00:19,643 --> 00:00:22,288 open the terminal, stop the server, 9 00:00:22,783 --> 00:00:26,083 and run "npm install --save-dev" 10 00:00:26,083 --> 00:00:28,288 pasting the required packages. 11 00:00:28,288 --> 00:00:32,404 "tailwindcss" is based on "postcss", 12 00:00:32,404 --> 00:00:35,706 that is a tool for transforming stylesheets, 13 00:00:35,706 --> 00:00:37,939 and also "autoprefixer", 14 00:00:37,939 --> 00:00:42,398 that adds browser-specific prefixes to CSS rules. 15 00:00:42,398 --> 00:00:44,994 The "--save-dev" option will add the 16 00:00:44,994 --> 00:00:47,446 packages to our "devDependencies", 17 00:00:47,518 --> 00:00:50,486 rather than our production "dependencies". 18 00:00:50,486 --> 00:00:52,322 Let's run this command now; 19 00:00:53,306 --> 00:00:55,108 it will take a few seconds. 20 00:00:55,366 --> 00:00:57,747 Ok, it installed everything. 21 00:00:57,747 --> 00:01:00,902 We'll now have a "tailwindcss" command, 22 00:01:00,902 --> 00:01:03,086 that we can run with "npx". 23 00:01:03,166 --> 00:01:06,266 and we can use it to initialize our project, 24 00:01:06,266 --> 00:01:07,112 with "init", 25 00:01:07,182 --> 00:01:09,863 passing the "postcss" option. 26 00:01:09,863 --> 00:01:12,681 This created two configuration files, 27 00:01:12,681 --> 00:01:15,484 that we can see in our project. 28 00:01:15,484 --> 00:01:18,016 There's "postcss.config.js", 29 00:01:18,106 --> 00:01:22,183 that simply tells it to use the "tailwindcss" 30 00:01:22,183 --> 00:01:24,629 and "autoprefixer" plugins. 31 00:01:24,720 --> 00:01:26,532 We can leave this as it is. 32 00:01:26,532 --> 00:01:30,356 Then there's a "tailwind.config.js". 33 00:01:30,356 --> 00:01:33,781 Here we need to edit the "content" property, 34 00:01:33,781 --> 00:01:36,322 to tell Tailwind which of our 35 00:01:36,322 --> 00:01:38,600 files contain CSS classes. 36 00:01:38,687 --> 00:01:41,775 This is documented in the installation page. 37 00:01:41,775 --> 00:01:44,497 Tailwind will scan our files to see 38 00:01:44,497 --> 00:01:46,830 which CSS classes we're using, 39 00:01:46,908 --> 00:01:49,598 so that it will only send to the browser 40 00:01:49,598 --> 00:01:51,481 the styles we actually need. 41 00:01:51,548 --> 00:01:54,018 But for this to work we need to tell 42 00:01:54,018 --> 00:01:55,870 it where to find the files, 43 00:01:55,938 --> 00:01:58,989 by specifying a pattern like this one. 44 00:01:58,989 --> 00:02:01,067 Let's copy it into our project. 45 00:02:01,067 --> 00:02:03,252 This will match all the files 46 00:02:03,252 --> 00:02:04,984 inside our "app" folder 47 00:02:05,059 --> 00:02:07,590 that have one of these extensions. 48 00:02:07,590 --> 00:02:10,160 In fact, we'll only use CSS classes 49 00:02:10,160 --> 00:02:11,922 in our React components, 50 00:02:11,996 --> 00:02:15,795 and we use the "jsx" extension for those files, 51 00:02:15,795 --> 00:02:18,523 (or "tsx" if you use TypeScript,) 52 00:02:18,523 --> 00:02:21,248 so we could remove the other extensions, 53 00:02:21,248 --> 00:02:24,279 which should make it a little bit faster, 54 00:02:24,279 --> 00:02:26,792 because it has less files to scan. 55 00:02:26,866 --> 00:02:28,835 Let's also add another folder, 56 00:02:28,835 --> 00:02:30,147 called "components". 57 00:02:30,212 --> 00:02:32,883 Because later on we'll add some React 58 00:02:32,883 --> 00:02:34,760 components in that folder, 59 00:02:34,832 --> 00:02:37,126 just to keep them separate from 60 00:02:37,126 --> 00:02:39,421 our page and layout components. 61 00:02:39,495 --> 00:02:43,093 Ok, this is the Tailwind configuration file. 62 00:02:43,093 --> 00:02:46,058 There is one final step we need to do, 63 00:02:46,058 --> 00:02:49,333 that is importing the Tailwind styles 64 00:02:49,333 --> 00:02:51,811 into our "globals.css" file. 65 00:02:51,899 --> 00:02:55,412 We can do that by adding these three directives. 66 00:02:55,412 --> 00:02:59,290 So let's go and edit our "globals.css". 67 00:02:59,290 --> 00:03:01,594 We can replace the existing rule 68 00:03:01,594 --> 00:03:03,682 with the Tailwind directives, 69 00:03:03,754 --> 00:03:07,416 so we'll use the Tailwind styles by default. 70 00:03:07,416 --> 00:03:09,872 Now, since we're installing things, 71 00:03:10,016 --> 00:03:12,870 there's also a very useful Visual Studio 72 00:03:12,870 --> 00:03:14,867 Code extension for Tailwind. 73 00:03:14,938 --> 00:03:16,626 You can find it simply by 74 00:03:16,626 --> 00:03:18,313 searching for "tailwind". 75 00:03:18,381 --> 00:03:22,326 Just make sure it's the one from Tailwind Labs. 76 00:03:22,326 --> 00:03:23,538 Let's install it! 77 00:03:23,766 --> 00:03:26,974 This will provide code auto-completion 78 00:03:26,974 --> 00:03:28,325 for CSS classes, 79 00:03:28,409 --> 00:03:30,326 as we'll see in the next video, 80 00:03:30,326 --> 00:03:33,026 when we'll start adding some Tailwind 81 00:03:33,026 --> 00:03:34,631 utilities to our code. 82 00:03:34,704 --> 00:03:38,503 Ok, the CSS framework is fully configured. 83 00:03:38,503 --> 00:03:41,018 We can now go back to our application, 84 00:03:41,303 --> 00:03:44,307 and see what it looks like with Tailwind. 85 00:03:44,307 --> 00:03:47,283 We just need to restart our dev server, 86 00:03:47,387 --> 00:03:49,208 it might take slightly longer 87 00:03:49,208 --> 00:03:50,716 to start the first time, 88 00:03:50,778 --> 00:03:52,827 because it needs to compile 89 00:03:52,827 --> 00:03:54,800 all the new Tailwind code. 90 00:03:54,875 --> 00:03:56,782 But you can see that our app 91 00:03:56,782 --> 00:03:58,553 certainly looks different. 92 00:03:58,621 --> 00:04:01,387 This may seem a bit strange at first, 93 00:04:01,387 --> 00:04:04,993 but Tailwind resets all the browser styles, 94 00:04:04,993 --> 00:04:09,498 so our elements have almost no styles by default. 95 00:04:09,498 --> 00:04:12,542 It will be up to us to explicitly define 96 00:04:12,542 --> 00:04:14,596 the style for each element, 97 00:04:14,672 --> 00:04:17,861 by adding some Tailwind utility classes, 98 00:04:17,861 --> 00:04:20,636 and we'll start doing that in the next video. 7075

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.