• This repository has been archived on 05/Jan/2021
  • Stars
    star
    516
  • Rank 85,726 (Top 2 %)
  • Language
    HTML
  • Created over 5 years ago
  • Updated about 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Tailwind CSS Playground

A simple starter project for playing around with Tailwind in a proper PostCSS environment.

To get started:

  1. Clone the repository:

    git clone https://github.com/tailwindcss/playground.git tailwindcss-playground
    
    cd tailwindcss-playground
  2. Install the dependencies:

    # Using npm
    npm install
    
    # Using Yarn
    yarn
  3. Start the development server:

    # Using npm
    npm run serve
    
    # Using Yarn
    yarn 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!

Play with it on CodeSandbox

A CodeSandbox version of this playground is one click away!

Building for production

Even though this isn't necessarily a starter kit for a proper project, we've included an example of setting up cssnano to optimize your CSS for production.

To build an optimized version of your CSS, simply run:

# Using npm
npm run production

# Using Yarn
yarn production

After that's done, check out ./public/build/tailwind.css to see the optimized output.

More Repositories

1

tailwindcss

A utility-first CSS framework for rapid UI development.
TypeScript
81,562
star
2

headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
TypeScript
25,564
star
3

heroicons

A set of free MIT-licensed high-quality SVG icons for UI development.
JavaScript
21,279
star
4

prettier-plugin-tailwindcss

A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.
TypeScript
5,382
star
5

tailwindcss-typography

Beautiful typographic defaults for HTML you don't control.
JavaScript
4,319
star
6

tailwindcss-forms

A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
HTML
4,137
star
7

tailwindcss.com

The Tailwind CSS documentation website.
MDX
3,233
star
8

tailwindcss-intellisense

Intelligent Tailwind CSS tooling for Visual Studio Code
TypeScript
2,783
star
9

tailwindcss-jit

JavaScript
2,188
star
10

tailwindcss-custom-forms

A better base for styling form elements with Tailwind CSS.
JavaScript
1,553
star
11

tailwindcss-line-clamp

A plugin that provides utilities for visually truncating text after a fixed number of lines.
JavaScript
1,176
star
12

tailwindcss-container-queries

A plugin for Tailwind CSS v3.2+ that provides utilities for container queries.
TypeScript
1,131
star
13

tailwindcss-aspect-ratio

JavaScript
956
star
14

designing-with-tailwindcss

Source code for the "Designing with Tailwind CSS" course.
CSS
712
star
15

heroicons.com

JavaScript
697
star
16

tailwindcss-setup-examples

675
star
17

tailwindui-vue

Deprecated, please use the Headless UI repo instead.
JavaScript
647
star
18

play.tailwindcss.com

JavaScript
638
star
19

tailwindui-react

Deprecated, please use the Headless UI repo instead.
TypeScript
433
star
20

tailwindcss-from-zero-to-production

Source code for the "Tailwind CSS Up and Running" screencast series.
JavaScript
379
star
21

blog.tailwindcss.com

JavaScript
342
star
22

tailwindui-issues

Bug fixes and feature request tracking for Tailwind UI.
233
star
23

webpack-starter

A quick and simple example of using Tailwind CSS with Webpack.
JavaScript
212
star
24

tailwindcss-plugin-examples

Examples to help you get started building your own Tailwind CSS plugins.
JavaScript
209
star
25

discuss

A place to ask questions, get help, or share what you've built with Tailwind CSS.
171
star
26

tailwind-play-api

PHP
44
star
27

minimal-tailwind-postcss-plugin

A simple PostCSS plugin designed to cover all of the tricky integration points a build-tool needs to support for Tailwind CSS.
JavaScript
11
star
28

reproduction-headlessui-vue

JavaScript
9
star
29

reproduction-headlessui-react

JavaScript
1
star