From d0b29c4ccfd92d0f3100a2e44c8ff2856ab10021 Mon Sep 17 00:00:00 2001 From: William Carroll Date: Fri, 15 Nov 2019 07:04:59 -0300 Subject: [PATCH] Initial commit --- .gitignore | 3 + .vscode/extensions.json | 3 + README.md | 53 +++++++++++++++ package.json | 19 ++++++ postcss.config.js | 14 ++++ public/favicon-16x16.png | Bin 0 -> 1029 bytes public/favicon-32x32.png | Bin 0 -> 1295 bytes public/favicon.ico | Bin 0 -> 15086 bytes public/index.html | 140 +++++++++++++++++++++++++++++++++++++++ public/tailwind.css | 3 + tailwind.config.js | 7 ++ 11 files changed, 242 insertions(+) create mode 100644 .gitignore create mode 100644 .vscode/extensions.json create mode 100644 README.md create mode 100644 package.json create mode 100644 postcss.config.js create mode 100644 public/favicon-16x16.png create mode 100644 public/favicon-32x32.png create mode 100644 public/favicon.ico create mode 100644 public/index.html create mode 100644 public/tailwind.css create mode 100644 tailwind.config.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..408cb749d --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules +public/build +yarn.lock diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 000000000..99e242bbb --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["bradlc.vscode-tailwindcss"] +} diff --git a/README.md b/README.md new file mode 100644 index 000000000..ad88e6fac --- /dev/null +++ b/README.md @@ -0,0 +1,53 @@ +# Tailwind CSS Playground + +A simple starter project for playing around with Tailwind in a proper PostCSS environment. + +To get started: + +1. Clone the repository: + + ```bash + git clone https://github.com/tailwindcss/playground.git tailwindcss-playground + + cd tailwindcss-playground + ``` + +2. Install the dependencies: + + ```bash + # Using npm + npm install + + # Using Yarn + yarn + ``` + +3. Start the development server: + + ```bash + # Using npm + npm run serve + + # Using Yarn + yarn run serve + ``` + + Now you should be able to see the project running at localhost:8080. + +4. Open `public/index.html` in your editor and start experimenting! + +## Building for production + +Even though this isn't necessarily a starter kit for a proper project, we've included an example of setting up both [Purgecss](https://www.purgecss.com/) and [cssnano](https://cssnano.co/) to optimize your CSS for production. + +To build an optimized version of your CSS, simply run: + +```bash +# Using npm +npm run production + +# Using Yarn +yarn run production +``` + +After that's done, check out `./public/build/tailwind.css` to see the optimized output. diff --git a/package.json b/package.json new file mode 100644 index 000000000..2c3a60a99 --- /dev/null +++ b/package.json @@ -0,0 +1,19 @@ +{ + "scripts": { + "serve": "cross-env NODE_ENV=development concurrently \"postcss public/tailwind.css -o public/build/tailwind.css --watch\" \"live-server ./public\"", + "development": "cross-env NODE_ENV=development postcss public/tailwind.css -o public/build/tailwind.css", + "production": "cross-env NODE_ENV=production postcss public/tailwind.css -o public/build/tailwind.css" + }, + "dependencies": { + "autoprefixer": "^9.5.1", + "tailwindcss": "^1.0" + }, + "devDependencies": { + "@fullhuman/postcss-purgecss": "^1.2.0", + "concurrently": "^4.1.0", + "cross-env": "^5.2.0", + "cssnano": "^4.1.10", + "live-server": "^1.2.1", + "postcss-cli": "^6.1.2" + } +} diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 000000000..e4fec1909 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,14 @@ +const purgecss = require('@fullhuman/postcss-purgecss')({ + content: ['./public/**/*.html'], + defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [] +}) + +module.exports = { + plugins: [ + require('tailwindcss'), + require('autoprefixer'), + ...process.env.NODE_ENV === 'production' + ? [purgecss, require('cssnano')] + : [] + ] +} diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png new file mode 100644 index 0000000000000000000000000000000000000000..58aae7eac16a94e9d81a4ba518b314c8fdf4142a GIT binary patch literal 1029 zcmZ`%SxggA6n&)>u!xkFF0>^n7L_QFwunnbwzS$7L9C5p^aChG2^uSoQH*E{3gU;N zMqF@)OK;O*4K$Dg zkLcb6xoe_T=LL%y3OI#rZb26bLRcLDF3c<;DKSk6Til@?q_^v70w>VL%(rOZ1jC{S zcpPkiJ#6&~<5dTVdOEC;1|BQ{Jne3<4Y2Ub4CcYM8Q}5SYo6#%Ed*if15hI}j0Js5AA0HnNDJ#r^>m~?u2L5#aczh!C`UoF(;fJ5Y@3&52 z%{}gH85^$P`NoDyx#EjsBi)V80M;}im%sb@mv_}N{vOXjOF^KIFjDHvDd`*>8#z49 zPas?rBtJR&^X7(%1+3ux-+z5C@#Co1u2pkH65AROW#y(V)$Mrs=F<{5OtBl*Y(+>k z122}*9Qgx^{)91I@Bfj*3kp##t{KEX-Z`T##UkmmW-EeK2P)GHCSzRdaIfZ0(Gd55 zsVBO&c6M^2tig4PF3+#5ZaP?ZHZjw2=2=Tsd-tnL{r$af+m1M$eLaJn)n%S1?^~Ze zdcCj4+4bV_yY@a$%|O?{(gVh;?K8wi9A#7S}kqtJa zQK=WksN!SP^DOE(t$MyTE`E+mqgAQW%4^>KF|cWKUO|5G{|B^hl-V$_dZ#6eFz0Mn z*o!vj7i_dCh+?}yX8!QUXtN!ke-VS+(zsF%XZ;D0V#395`YWy*fKt_Frt}ZpZ^f$scm*@Zh literal 0 HcmV?d00001 diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png new file mode 100644 index 0000000000000000000000000000000000000000..30eb5396ba926f9d35034d43d1a21888922f3699 GIT binary patch literal 1295 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzmUKs7M+SzC{oH>NSwWJ?9znhg z3{`3j3=J&|48MRv4KElNN(~qoUL`OvSj}Ky5HFasE6@fg!ItFh?!xdN1Q+aGJ{c&& zS>O>_%)lU~3c`$@K`I}Bg6t)pzOL+#Sp|3nm2GF=0y=|vwx^3@NW|f{Q{ywjN+pil z-+#X6+@YuYU#`9+79zsRYjomYhGWX?&6|XzMN8Ag8%wV4?_SX@(PVxrZ_}>HlD;qa zm+gIDbKRxD(M|JaugH}#HF>U;{0Z%40YFn()D&+tt=LvEy!)V-PL(~0OYiGh1?*^u?D(_fVbqb+KOV7YEsi*l=Cl1wL3}auOP%R+A9Exv zKI(oVvPf;xgT%vfN8+0J8}z!v8=0P!XIHUQHOe*IQ{R+$`M-zq%HTOWd)fHRUaMrsj%e&_ke=vLY z=jg2bTP#`;mo7H?SnQaXu=Qy)=O^Vp$t{0O7hOJBKI6-iQ!6LO3pLs&fBcuU&Aiw- z&HHiacezK&d&?}{&n2+^PyWMblwH0j+d_;Nm~&N2Tq8b~}?*Bk4vr2$I=mIf>hSQ@Z2@c*TOP^a4->~uSWhuzD9U9Ovg zQK;LsEZF08278@k2Uq4V6!!Q+5zqI69iErLKLGxrV3+$t@P7#Yp{9#y8h9>}N6fqu_r&veVZP z*;Sn~rs1|F3&MMstOx&_;FpYnWDI21G0=TEiXX2c7R|6vWGF#~JHX!$eK8ltT+hM( zU1$Os29e>n$j}^lx%%G7?&`Db|G zM25F@88rM-$6uX#s*Dql_7abL>EFIo*Wh0b{-a4_pve$U9|OaV@PjE|zDO+E z3Vzq6!fM6`{58;KWOyGtn#7KD84@;>G6om$@Uci?h!%}3&Fo2yr-&Qe-I_U4nP)L57F2gWm@Qp(FW_lMtD8>)2 zhw{qZiKpv`rzi5yPqqAdQuBqriqqK8S;k;IaFlU4=6DAgsP@k82ljiQ=I|@kC1zg= zwN=^3jcy}9J&`Ft4Q0+xTcOiRhK#vU z?lr;)W3ZVyEide|!D`kQ{Ogqs6+8yP%2UMCX7JBy-DQTWko(B60vWb52B-0Z$;2AL z$WPT;Q?1q7y_3YEA>!%ph^L=rK1=cYLU_*gyTnpEx!rZ({|@-Ku}<4ZZr6z~cjC+Y zz`u=Hv;i4bAcJY#ooiel_j}}ac4AQ}GL$02oaT}r7n9Y`(txD_O9Pe$EDcy1m>Ug9 z?I*5Vl!p8KiQDv+FKE|;qDgC`qE>5LMVZ!$`A2ADaZxs++D5)a3!Wy`LVm4ng|WIe zaF5pN*KpGA&uy#DY1Kh%p~N{Y&T?5lO9Pe$X0HME9c|Qg?9_GaoPoF`>qXY4MXXI5 zsF6KLZR7XUW%h$%Kee%Esf|5AZEQJpv4U&o`DlZ+`vG;i(tN&Yyu-dyR{ezzc)hG|Ut)b8)9Rh<#V7W$yQVO34gwvh^8;${y@k43 z-fK(v*Fd!fp5&G_s+To(TS~nzQ7?wKeiq}O*ui1=??VS~!~Y!gmE`Ya`ybvu=xO$K z)=>Y_a8t7=X1(9YI=P*7etfDR{@UJ6H(@(>)*TU>>$uMNC?O zEqn%BSc)Cwtly@OA^g?8+*R1YV#cA2x>MHuPi%1^w)k~yu?-CG5|hs259i^3l5yz8 zAAd}pJEM=K^DgunJNOhaX(ushbjly6&PHi_9>#u6oV|`WsPV2TX+E!Gt?nhVT&GOLLIhv54JdfFX-ot)HyFB zF6w8z#;}7YvBeZ0g?}~tTcP@NS@JcKQ- zMF*cqOw0$D^^T#Kvf+~f3YShRk + + + + + + + + Welcome to Tailwind! + + +
+ +
+
+
+
+
+ + + + + + + + + + + + +
+
+

Welcome to your first Tailwind project!

+

The file you're looking at is the index.html file in the repository you just cloned. If you used npm run serve to view this page, try editing that file to see this page automatically update with your changes.

+
+
+
+
+
+
+
+ + + + + + +
+
+

Documentation

+

Get familiar with Tailwind’s utility-first approach and start building awesome stuff.

+
+ + Explore the docs + + + + +
+
+
+
+
+
+
+ + + + +
+
+

Component Examples

+

Browse pre-built components using Tailwind’s utility classes.

+
+ + Browse examples + + + + +
+
+
+
+
+
+
+ + + + +
+
+

Resources

+

A collection of assets and resources to help supercharge your Tailwind workflow.

+
+ + Find resources + + + + +
+
+
+
+
+
+
+ + + + +
+
+

Community

+

Connect and learn from other Tailwind users in the community.

+
+ + Connect + + + + +
+
+
+
+
+
+
+
+
+
+ + diff --git a/public/tailwind.css b/public/tailwind.css new file mode 100644 index 000000000..b5c61c956 --- /dev/null +++ b/public/tailwind.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 000000000..af829e20f --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,7 @@ +module.exports = { + theme: { + extend: {}, + }, + variants: {}, + plugins: [], +}