-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat (tailwind): new tailwind framework
- Loading branch information
Showing
3 changed files
with
50 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
--- | ||
permalink: /frameworks/tailwind/ | ||
layout: single | ||
--- | ||
|
||
Tailwind CSS | ||
============ | ||
|
||
[Tailwind CSS](https://tailwindcss.com/) is a tool to manage CSS based on the principle of CSS classes related to atomic styles. | ||
|
||
Installing and a configuring Tailwind CSS according to the [Get started with Tailwind CSS](https://tailwindcss.com/docs/installation). | ||
|
||
Basic steps to install on Tailwind CSS. | ||
|
||
# Summary of Installation Commands | ||
|
||
~~~ | ||
npm install -D tailwindcss | ||
npx tailwindcss init | ||
~~~ | ||
|
||
|
||
~~~ | ||
npx tailwindcss -i ./src/main-tw.css -o ./dist/main.css --watch | ||
~~~ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
const html = (strings, ...values) => {return { raw: strings, values }} | ||
|
||
const title = 'My Title' | ||
const message = 'My Message' | ||
|
||
const doc = html`<!DOCTYPE html> | ||
<html lang="en-US"> | ||
<head> | ||
<title>${title}</title> | ||
</head> | ||
<body> | ||
<h1>${message}</h1> | ||
</body> | ||
</html>`; | ||
|
||
console.log('=== doc') | ||
console.log(doc) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<body> | ||
<h1>Tagged Template</h1> | ||
<script type="text/javascript" src="js/tagged-template.js"> | ||
</script> | ||
</body> | ||
</html> |