Tailwind CSS v2.0 | Setup and Install codewithchu English Indonesian

Tailwind CSS v2.0 | Setup and InstallYouTube↗ IA↗(long shot)
Howto & Style 14.6K views 267 likes 8 dislikes 21 Nov 2020

codewithchu 698 subscribers Canada YouTube↗

Click to Play Video

hey back with another video today we'll be talking about tailwind css 2.0 tailwind just released

hai kembali dengan video lain hari ini kita akan berbicara tentang tailwind css 2.0 tailwind baru saja merilis

a version 2.0 a couple days ago now here's the new tailwind css.com website they've revamped

versi 2.0 beberapa hari yang lalu sekarang inilah situs web tailwind css.com baru mereka telah merubah

everything made everything a lot bigger kind of showcase what this 2.0 is all about

semuanya membuat segalanya jauh lebih besar jenis showcase apa ini 2.0 adalah tentang

if you have time go take a look at it i'm going to go into this

jika Anda punya waktu untuk melihatnya, saya akan masuk ke

get started area and i think they kind of outline the new version or what's new

area memulai ini dan saya pikir mereka menguraikan versi baru atau apa yang baru

about it in here a little bit better they have this what's new in tailwind in this section

tentang itu di sini sedikit lebih baik mereka memiliki ini apa yang baru di tailwind di bagian ini

they got this new focus ring so i guess a new kind of styling for their buttons

mereka mendapat cincin fokus baru ini jadi saya rasa jenis gaya baru untuk tombol

they introduced dark mode which is pretty cool there i guess there's two ways to do it there's a

mereka mereka memperkenalkan mode gelap yang cukup keren di sana saya kira ada dua cara untuk melakukannya ada

automated way if you set up in your os dark mode or light mode it'll choose one or the other

cara otomatis jika Anda mengatur di os Anda mode gelap atau mode terang itu akan memilih satu atau yang lain

and there's also a toggle a way to toggle it with a css class they've extended the color palettes as

dan ada juga cara beralih untuk beralih dengan kelas css mereka telah memperluas palet warna

well so there's more colors i'm not sure if this is such a big deal because you could always just

juga sehingga ada lebih banyak warna saya tidak yakin apakah ini seperti masalah besar karena Anda selalu bisa

create your own color palette yourself extend variant and i guess there's more of these now

membuat warna Anda sendiri palet sendiri memperluas varian dan saya kira ada lebih banyak dari ini sekarang

so there's first last odd okay

jadi ada yang pertama aneh terakhir oke tidak apa

that's all right and there's a new extra y breakpoint shareable presets

-apa dan ada tambahan baru y breakpoint preset yang dapat dibagikan,

i guess they made this so you can create extra like config files or preset files

saya kira mereka membuat ini sehingga Anda dapat membuat ekstra seperti file konfigurasi atau file preset

and you can import them into your config file to make it a little bit more modular

dan Anda dapat mengimpor mereka ke file konfigurasi Anda untuk membuatnya sedikit lebih modular,

there's gradients which i think they seem to be the same i don't know if there's very

ada gradien yang menurut saya tampaknya sama. Saya tidak tahu apakah ada sangat

much different for there maybe somebody that knows can leave a comment down below

banyak perbedaan karena mungkin seseorang yang tahu dapat meninggalkan komentar di bawah

and animations which i think they also had but maybe they've added new ones

dan animasi yang saya pikir mereka juga punya tetapi mungkin mereka telah menambahkan yang baru

ping, pulsing, bounce

ping, berdenyut, terpental

let's go and take a look at the install

mari kita pergi dan lihat penginstalan

and see what the difference is i'm gonna go here let's go ahead and make dir

dan lihat apa perbedaannya saya akan pergi di sini mari kita lanjutkan dan buat dir

i'm gonna do tailwind-v2 see the end of that open up code . this code

saya akan melakukan penarik -v2 melihat akhir dari kode terbuka itu. kode ini

i have vs code open let's open up terminal here and take a look at how do we install tailwind now

saya punya kode vs buka mari kita buka terminal di sini dan lihat bagaimana kita menginstal tailwind sekarang

and see how it how it's changed npm install tailwind css post css auto prefixer previously we

dan lihat bagaimana itu berubah npm install tailwind css post css auto prefixer sebelumnya kita

kind of only needed this i guess if we're using post css and they added this as well make it a

hanya membutuhkan ini saya kira jika kita ' menggunakan post css dan mereka menambahkan ini juga membuatnya

little bit more default that way to use post css because i think a lot of the front end

sedikit lebih default dengan cara menggunakan post css karena saya pikir banyak

frameworks use post css like vue cli i think a react app also does it but

kerangka front end menggunakan post css seperti vue cli saya pikir aplikasi react juga melakukannya tetapi

you can't change you can't add plugins to post css through create react app well at least not

Anda bisa tidak mengubah Anda tidak dapat menambahkan plugin ke posting css melalui aplikasi buat bereaksi dengan baik setidaknya tidak

officially i think you can kind of hack it i don't think that's how they want it to work anyways

secara resmi saya pikir Anda dapat meretasnya, saya tidak berpikir itu cara mereka ingin berfungsi,

all right let's get started here let's go npm init - y

baiklah mari kita mulai di sini, ayo npm init - y

now that created our package let's go and install some stuff clear and let's close this

sekarang setelah membuat paket kita mari kita pergi dan menginstal beberapa hal dengan jelas dan mari kita tutup ini

let's grab this npm install and i want to install a couple more packages here

mari kita ambil instalasi npm ini dan saya ingin menginstal beberapa paket lagi di sini

let's do post css cli css nano and on change for watching let's install that

mari kita lakukan posting css cli css nano dan pada perubahan untuk menonton mari instal itu

and if you've seen my other video on how to install tailwind css i've we've used these

dan jika Anda pernah melihat video saya yang lain tentang cara menginstal tailwind css Saya sudah pernah menggunakan

packages before if you're new then then great as well

paket ini sebelumnya jika Anda baru maka bagus juga

okay that's done installing let's clear that

oke sudah selesai menginstal mari kita jelaskan bahwa

so next step css.config and tailwindcss.config or tailwind.config.js okay we can do that by

jadi langkah selanjutnya css.config dan tailwindcss.config atau tailwind.config.js oke kita bisa melakukannya oleh

let's kill two birds with one stone you can do npx and you can do - p this will create

mari kita bunuh dua burung dengan satu batu Anda dapat melakukan npx dan Anda dapat melakukannya - p ini akan membuat

both of our files for us let's go ahead and configure this first now i want to do this mode

kedua file kita untuk kita mari kita lanjutkan dan konfigurasikan ini terlebih dahulu sekarang saya ingin melakukan lapisan mode ini

layers because i think if you don't put that in it gives us some kind of deprecated error

karena saya pikir jika Anda tidak melakukannya taruh di dalamnya memberi kita semacam konten

content and we'll look at dot slash public

kesalahan yang tidak berlaku lagi dan kita akan melihat dot slash publik,

we haven't created this file yet or this folder yet

kita belum membuat file ini atau folder ini belum

okay so we're gonna look oops we're gonna look for all the html files within our public directory

oke jadi kita akan mencari up, kita akan mencari semua html file dalam direktori publik

and we haven't created that yet we'll do that in a sec let's go into posts css config we have in here

kita dan kita belum membuatnya, kita akan melakukannya sebentar lagi mari kita masuk ke konfigurasi css posting yang kita miliki di sini

using post css as your preprocessor and i like this a little bit more so i'm going to grab that

menggunakan post css sebagai preprocessor Anda dan saya suka ini sedikit lagi jadi saya pergi untuk mengambil bahwa

we're not using this and we're going to need to include req

kami tidak menggunakan ini dan kami akan perlu menyertakan req

we're going to include that here

kami akan memasukkannya di sini

and what we're going to do here is do default reset default

dan apa yang kami ' yang akan dilakukan di sini adalah melakukan reset default default

that looks all good let's delete that oops

yang terlihat bagus mari kita hapus oops itu baik-baik saja mari

all right let's create our css file our source css file clear this make dir

kita buat file css kita file css sumber kita bersihkan ini buat dir

and we'll need source we'll make dir we'll need css touch source

dan kita akan membutuhkan sumber kita akan membuat dir kita perlu css touch sumber

it says tailwind.css now we have all this and we just need to post go back to here

dikatakan tailwind.css sekarang kita memiliki semua ini dan kita hanya perlu memposting kembali ke sini

and that's our source css file let's go and create some scripts within our package

dan itu file css sumber kita, mari kita pergi dan membuat beberapa skrip dalam paket kita

get rid of that clear that and we'll do tw:build

singkirkan itu jelas itu dan kita akan melakukannya tw: build

talent css build undo source css flash tailwind css - o for output dot slash public

talent css build undo source css flash tailwind css - o untuk output dot slash public

we haven't created this directory yet no wind.css

kita belum membuat direktori ini belum ada wind.css

okay let's say that i think that's all correct it's going to try it out

oke katakanlah saya pikir itu semua benar itu akan mencobanya

npm run tailwind:build and looks like it's good and it should create this

npm run tailwind: membangun dan sepertinya bagus dan itu harus membuat

pathway for us public css tailwind css built it using 3.74 megs let's create another

jalur ini untuk kita css tailwind publik css membangunnya menggunakan 3,74 MB mari kita buat yang lain

we'll do watch what we need here is on change

kita akan lakukan melihat apa yang kita butuhkan di sini sedang berubah

and we're going to watch this file

dan kita akan melihat file ini

and we're going to watch all css files within source

dan kita ' kembali akan menonton semua file css dalam sumber

and we're going to use this npm run tw build oh i think that's it let's save that oh i need

dan kami akan menggunakan npm run tw ini membangun oh saya pikir itu ayo simpan itu oh saya butuh

a comma here just didn't like that now let's go and run this script npm watch

koma di sini hanya tidak seperti itu sekarang mari kita pergi dan menjalankan skrip ini npm tonton oke jadi itu menonton dua file ini mari

okay so it's watching these two files let's file in this file because i only have one css file

simpan di file ini karena saya hanya punya satu file css

let's add some colors and do cwc and i got red blue and gray

mari tambahkan beberapa warna dan lakukan cwc dan saya mendapat warna merah biru dan abu-abu

and i got some colors here i'll just paste these in

dan saya mendapat beberapa warna di sini saya hanya akan menempelkannya

and i got this two two two two two two save that it washed it so it's building it right now

dan saya mendapatkan ini dua dua dua dua dua menyimpan itu mencucinya jadi itu membangunnya sekarang

and it's built and let's also do something here code

dan itu dibangun dan mari kita juga melakukan sesuatu di sini kode

and we'll do at apply text uwc red okay as that's building let's go take a look

dan kita akan lakukan di menerapkan teks uwc merah oke karena itu membangun mari kita lihat

that created that style for here you know automatically built our css file from the source

yang menciptakan gaya itu untuk di sini Anda tahu secara otomatis membuat file css kita dari sumber

what else do we need to search for let's do cwc

apa lagi yang perlu kita cari mari kita lakukan cwc

and there's 66 different classes with cwc we have red blue and gray okay through so it's using the

dan ada 66 kelas yang berbeda dengan cwc kita memiliki merah biru dan abu-abu oke jadi itu menggunakan

color palette theme okay let's exit out of that okay let's go and create a text file or index file

tema palet warna oke mari kita keluar dari itu oke mari kita pergi dan membuat file teks atau file indeks

leave that watching okay touch

biarkan menonton oke sentuh

indeks dot html

create that let's do doc for and we'll have this emmet abbreviation in our boilerplate for html

buat yang mari kita lakukan doc untuk dan kita akan memiliki emme ini t singkatan di boilerplate kita untuk html

to tailwind css 2.0 let's add our link css

ke tailwind css 2.0 mari tambahkan link kita css

and tailwind add some let's do div this will be class we'll do another div

dan tailwind tambahkan beberapa mari kita lakukan div ini akan menjadi kelas kita akan melakukan div lain

we'll do h1 and ptek

kita akan melakukan h1 dan kelas

class equals and here i'll do flex justify center and items center and we'll do a heights

ptek sama dan di sini saya akan melakukan flex justify pusat dan item pusat dan kami akan melakukan

screen i'm going to do padding 20 text center here i'll do text 9 xl

layar ketinggian Saya akan melakukan padding 20 pusat teks di sini saya akan membuat teks 9 xl

so they've increased the text size i think six was what it was before excel

jadi mereka telah meningkatkan ukuran teks saya pikir enam adalah apa yang sebelum excel

and here i'll do tailwind css 2.0 is now here let's serve this up and see if it's working

dan di sini saya akan melakukan tailwind css 2.0 sekarang di sini mari kita sajikan ini dan lihat apakah itu berfungsi

and let's go full screen tailwind css 2.0 is now here that's how you install tailwind css 2.0

dan mari kita pergi layar penuh tailwind css 2.0 sekarang di sini begitulah cara Anda menginstal tailwind css 2.0

let's take a look at how we can serve it up as production so we haven't purged our css our file's

mari kita lihat bagaimana kita dapat melayani sebagai produksi jadi kita belum membersihkan css file kita

still pretty big right now okay let's take a look here we need this grab this just like this one

masih cukup besar sekarang oke mari kita lihat di sini kita perlu ambil ini seperti ini

that rod replace this with post css and this is using our post css cli

yang batang ganti ini dengan posting css dan ini menggunakan cli css posting

now we need to add this kind of this down here

kita sekarang kita perlu menambahkan ini semacam ini di sini di

where is it this node environment production so this is the variable to tell it that it's going

mana itu produksi lingkungan node ini jadi ini adalah variabel untuk mengatakan bahwa i t akan

for production and that will signal it to use this for the purge otherwise the tail when css

untuk produksi dan itu akan memberi sinyal untuk menggunakan ini untuk pembersihan jika tidak, ekor ketika css

doesn't use purge unless it is specified here using this variable here hopefully my post css

tidak menggunakan pembersihan kecuali ditentukan di sini menggunakan variabel ini di sini semoga css posting saya

has no errors because we haven't run it yet every time we've built it it's using just the regular

tidak memiliki kesalahan karena kami belum menjalankannya setiap kali kita telah membangunnya itu hanya menggunakan

tailwind build in this one we're actually using the post css

tailwind build biasa di yang ini kita sebenarnya menggunakan posting css

let's go and run tw prod build that it looks like it's built

mari kita pergi dan menjalankan tw prod membangun yang sepertinya itu dibangun

let's go to another tab let's go to cd public css ls la

mari kita pergi ke tab lain mari kita pergi ke cd public css ls la

we'll see that it has the size is one byte in size if you go and check it out this is what we have

kita akan melihat bahwa ukurannya adalah satu byte jika Anda pergi dan memeriksanya inilah yang kami

hold on a sec let me make it so it's so this is what our css looks like now it's been purged and

pegang sebentar biarkan saya membuatnya jadi seperti inilah css kami sekarang telah dibersihkan dan

minified now let's check out over here to see if this has changed at all let's serve it back up

dikecilkan sekarang mari kita periksa di sini untuk melihat apakah ini telah berubah sama sekali mari kita sajikan kembali

okay so that is now not working let's try it let's check our public oh it's probably because of this

oke jadi sekarang tidak berfungsi mari kita coba mari kita periksa publik kita oh itu mungkin karena ini

okay let's try serving it up again

oke mari kita coba menyajikannya lagi

npm run production there was an error in my kind of my expression here for the content okay let's

npm jalankan produksi di sana adalah kesalahan dalam saya jenis ekspresi saya di sini untuk apa-apa membiarkan konten ini

go add a couple of custom classes we had cwc or cwc and i'll do red and i'll do text cw c blue

pergi tambahkan beberapa kelas khusus yang kami punya cwc atau cwc dan saya akan melakukan merah dan saya akan melakukan teks cw c biru

npm doesn't have those classes anymore we got our red and blue classes showing up now that's pretty

npm tidak memiliki kelas-kelas itu lagi kami mendapatkan kelas merah dan biru kami muncul sekarang itu cukup

much it for installing and setting up tailwind css 2.0 and it's not very much different than the 1.0

banyak untuk menginstal dan mengatur tailwind css 2.0 dan itu tidak jauh berbeda dari 1.0

let's go to our script or our package file just to check it out we have our npm scripts here i

mari kita pergi ke skrip atau file paket kami hanya untuk memeriksanya kami memiliki skrip npm di sini saya

think the build script here is the same as my 1.0 build script nothing's really changed there

pikir skrip build di sini sama dengan skrip build 1.0 saya tidak ada benar-benar berubah di sana

the watch script is a little bit different i'm now watching all css files in the source

, skrip arloji sedikit berbeda.Saya sekarang menonton semua file css di folder

folder just because i think they're trying to push more of the modular css modular config so i want

sumber hanya karena saya pikir mereka mencoba mendorong lebih banyak konfigurasi modular css modular jadi saya ingin

to be able to watch that i they're probably something i'd probably do with presets here

dapat menontonnya. mereka mungkin sesuatu yang mungkin akan saya lakukan dengan preset di sini

maybe in the future maybe add another folder like this the production script i think this will

mungkin di masa depan mungkin menambahkan folder lain seperti ini skrip produksi saya pikir ini benar - benar

actually work in later versions of version one where it's using the node environment production

akan berfungsi di versi yang lebih baru dari versi satu di mana itu menggunakan produksi lingkungan node

but in the earlier versions maybe not so this hasn't really changed if you're you you're

tetapi di versi sebelumnya mungkin tidak begitu hasn ini tidak benar-benar berubah jika Anda adalah Anda, Anda

used to the newer versions of version one but if you're used to older versions of version one this

terbiasa dengan versi yang lebih baru dari versi satu tetapi jika Anda terbiasa dengan versi yang lebih lama dari versi satu ini

might be a little bit different but it's a good change it makes it easier to purge out your css

mungkin sedikit berbeda tetapi ini adalah perubahan yang baik itu membuatnya lebih mudah untuk dibersihkan Keluarkan

few takeaways there's a couple new features looks

beberapa css Anda ada beberapa fitur baru sepertinya

like there's more capabilities to build out more modularly more pseudo classes

ada lebih banyak kemampuan untuk membangun lebih modular lebih banyak kelas semu

dark mode now give tailwind a try test out the new features let me know what you think that's it for

mode gelap sekarang berikan tailwind mencoba uji fitur baru beri tahu saya apa yang Anda pikirkan itu untuk

setting up and installing tailwind css version two and i'll talk to you guys in the next video

mengatur dan menginstal tailwind css versi dua dan saya akan berbicara dengan kalian dalam video berikutnya

Similar videos:

Tailwind CSS v2.0 | Forms Plugin
codewithchu
5.5K views 121 likes 2 dislikes 23 Nov 202070% match

Buld Your Own Home Cloud
misperry
32.8K views 489 likes 41 dislikes 24 Jan 201967% match

El mejor truco con MONEDAS Y CARTAS | Magia REVELADA (MATRIX)
Sr. Mago
184.8K views 4.4K likes 89 dislikes 06 Feb 202066% match

Days Gone - NICE AND BLOODY - Walkthrough Gameplay Part 8
PeteTV
49 views 5 likes 0 dislikes 10 May 201965% match

Tek Transmitter & Teleporter | Ark:Crystal Isles #43
Bemo Guinness
3.7K views 57 likes 5 dislikes 18 Sep 202065% match

PDR on 💪‘69 BOSS 302 Mustang!#showcar #pdr #boss302mustang #undented
PDR Peterson Dent Repair
741 views 31 likes 9 dislikes 09 Jul 201865% match

Building Stormbreaker: Part 1
Hacksmith Industries
2.3M views 40.8K likes 542 dislikes 27 Sep 201865% match

PDR training 😎on ‘91 Mercedes Benz E500 decklid Dent 👍
PDR Peterson Dent Repair
1.4K views 53 likes 6 dislikes 16 Aug 201865% match

How to Clean Your Xbox One Fan
Tinker Man Mick
18.2K views 662 likes 22 dislikes 08 Nov 202065% match

Blender Tutorial: How to Remove People/Objects from Videos [Node Editor]
Darkfall
30.3K views 779 likes 13 dislikes 27 Jul 201765% match

We Got Air Support | Ark: Extinction #3
Bemo Guinness
2.1K views 56 likes 5 dislikes 04 Oct 202065% match

Recon and Corporate OSINT with DNSGrep and Rapid7 Open Data
codingo
2.1K views 143 likes 12 dislikes 07 Feb 202165% match

CHEESY CARBO FIRE NOODLE * NEW BREAKFAST STYLE * Mukbang 자막 字幕 ਉਪਸਿਰਲੇਖ | Nomnomsammieboy
nomnomsammieboy
33.2K views 768 likes 42 dislikes 11 Jun 201965% match

CHEESY MESSY DOUBLE MEATBALL BURGER DRIPPING IN SAUCE ! * MUKBANG * | NOMNOMSAMMIEBOY
nomnomsammieboy
64.1K views 2.1K likes 97 dislikes 10 May 202064% match

raffle ticket numbering with Word and Number-Pro
chriscctx
63.1K views 44 likes 10 dislikes 29 Jun 201364% match

Custom U Brakes Part 1 - Framebuilding 101 with Paul Brodie
paul brodie
4.5K views 234 likes 3 dislikes 14 Nov 202064% match

Solidworks 2020 part design + rendering beginner Lesson
Simply 3D
6.7K views 149 likes 1 dislikes 01 Jun 202064% match

How to Make X-Carve Spindle Lock & Waste-board Accessories
Everything X-Carve
1.2K views 46 likes 1 dislikes 19 May 201964% match

Is this T6 of Rise of Kingdoms New Game from Lilith | WarPath
Shinchi42
5.7K views 145 likes 35 dislikes 29 Nov 202064% match

Elevator Platform | Ark:Crystal Isles #39
Bemo Guinness
1.5K views 50 likes 11 dislikes 09 Sep 202064% match

Inside The GAME CHANGING BSD Revolution Hub! Hands On Comparison!
@Brant_Moore
9.7K views 382 likes 10 dislikes 17 Nov 202064% match

Reconocer y SOLUCIONAR FALLAS ✅ de los móviles
MovilOne Mobile repair
5.4K views 314 likes 15 dislikes 03 Nov 202064% match

FRUGAL DINNERS | MEALS UNDER $10 | CHUCK ROAST DINNER | $2.50 per person
Ardent Michelle
2K views 119 likes 0 dislikes 12 Dec 202064% match

Blender 2.8: VFX Nodes (Version 1.4) [Addon]
Darkfall
5.1K views 168 likes 2 dislikes 13 Oct 201964% match

Como hacer una CHOCOTORTA FACIL 💜| Torta FACIL con GALLETAS de CHOCOLATE.💜
Experiencias R
3.6K views 132 likes 9 dislikes 11 Nov 202064% match

How to Make a Marketing Video by Heather Hubbard #MadewithKineMaster
KineMaster
179.9K views 1.8K likes 155 dislikes 29 Aug 201964% match

Blender Addon: VFX Nodes - Version 1.06 (Glitch Node Update)
Darkfall
1.5K views 75 likes 0 dislikes 03 Feb 202064% match

Free Backlink # 4 BandCamp (Do-Follow) SEO Training
Peii Henry
978 views 49 likes 0 dislikes 28 Jul 202064% match

Repair/Rebuild the Bulkhead / Titanium Chainplates When Re-rigging - Patrick Childress Sailing #52
Sailing Brick House, SV Osprey, RVing and More!
20.5K views 1.4K likes 7 dislikes 25 Oct 201964% match

Cyber Forensics Investigations, Tools and Techniques | SysTools Forensics Lab USA
SysTools
37.2K views 302 likes 29 dislikes 27 Apr 201764% match

Settings Privacy About Contact Donate