Kent Liau kentliau

This is a simple Tailwind plugin to expose all of Tailwind's colors, including any custom ones, as custom css properties on the :root element.

There are a couple of main reasons this is helpful:

You can reference all of Tailwind's colors—including any custom ones you define—from handwritten CSS code.
You can define all of your colors within the Tailwind configuration, and access the final values programmatically, which isn't possible if you did it the other way around: referencing custom CSS variables (defined in CSS code) from your Tailwind config.

See the Tailwind Plugins for more info on plugins.

	import Assignment from "./Assignment.js";
	import AssignmentTags from "./AssignmentTags.js";
	import Panel from "./Panel.js";

	export default {
	components: { Assignment, AssignmentTags, Panel },

	template: `
	<Panel v-show="assignments.length" class="w-60">
	<div class="flex justify-between items-start">

	import Assignment from "./Assignment.js";

	export default {
	components: { Assignment },

	template: `
	<section v-show="assignments.length">
	<h2 class="font-bold mb-2">
	{{ title }}
	<span>({{ assignments.length }})</span>

	export default {
	template: `
	<button class="bg-gray-200 hover:bg-gray-400 border rounded px-5 py-2 disabled:cursor-not-allowed" :disabled="processing">
	<slot />
	</button>
	`,

	data() {
	return {
	processing: true

	<!doctype html>
	<html lang="en" class="h-full">
	<head>
	<meta charset="UTF-8">
	<title>Episode 4: Your First Custom Vue Component</title>
	<script src="https://unpkg.com/vue@3"></script>
	<script src="https://cdn.tailwindcss.com"></script>
	</head>

	<body class="h-full grid place-items-center">

	<!doctype html>
	<html lang="en" class="h-full">
	<head>
	<meta charset="UTF-8">
	<title>Episode 3: Lists and Computed Properties</title>
	<script src="https://unpkg.com/vue@3"></script>
	<script src="https://cdn.tailwindcss.com"></script>
	</head>

	<body class="h-full grid place-items-center">

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Episode 2: Attribute Binding and Basic Events</title>
	<script src="https://unpkg.com/vue@3"></script>
	<style>
	html, body {
	height: 100%;
	}

	1. Login to your EC2 instance using your .pem file

	ssh -i your_pem_file.pem ubuntu@ec2-________.compute-1.amazonaws.com
	2. Create a new user that will access the instance using a password:

	$ sudo useradd -s /bin/bash -m -d /home/USERNAME -g root USERNAME
	where:

	-s /bin/bash : use /bin/bash as the standard shell
	-m -d /home/USERNAME : create a home directory at /home/USERNAME

	import UIKit

	typealias Bough = (rotation:CGFloat, length: CGFloat, scale: CGFloat, hue: CGFloat)

	final class TreeView : UIView {
	private let limit = 10

	private let boughs : [Bough] = [
	(rotation: -25, length: 85, scale: 0.75, hue: 0.04),
	(rotation: 30, length: 100, scale: 0.65, hue: 0.02)

	var mediaJSON = { "categories" : [ { "name" : "Movies",
	"videos" : [
	{ "description" : "Big Buck Bunny tells the story of a giant rabbit with a heart bigger than himself. When one sunny day three rodents rudely harass him, something snaps... and the rabbit ain't no bunny anymore! In the typical cartoon tradition he prepares the nasty rodents a comical revenge.\n\nLicensed under the Creative Commons Attribution license\nhttp://www.bigbuckbunny.org",
	"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" ],
	"subtitle" : "By Blender Foundation",
	"thumb" : "images/BigBuckBunny.jpg",
	"title" : "Big Buck Bunny"
	},
	{ "description" : "The first Blender Open Movie from 2006",
	"sources" : [ "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" ],