Home / JavaScript / CSS

📖 Documentation for Windi CSS

This is the documentation website for Windi CSS built using Vitepress.

Windi CSS

This is the documentation website for Windi CSS built using Vitepress.

Development

  • Install dependencies: npm install
  • Start development server: npm run dev
  • Run linter npm run lint

Screenshots 📷

Screen Shot 2021-02-15 at 17 56 54

Introduction

Screen Shot 2021-02-15 at 17 47 19

0 Open More issues
Closed

fix: typo in migration.md 

- "tailwindccs": "*",
+ "tailwindcss": "*",
opened Feb 16, 2021 by tonyketcham 1
Closed

Option to restrict to TW config settings?

Am just new to Windi CSS, looking like great work so far! Again, I've only just come across Windi, so pardon any ignorance :)

Is there an option to not Auto-Infer Variables and Variants beyond the tailwind.config settings? (Or select the features that can auto-infer, such as only margin and padding)

The limits set by the tailwind config, for me, is a strength as it helps to enforce the consistency of a style guide. And the times when having to step outside the rules needs to be a conscious decision.

opened Feb 18, 2021 by sanscheese 1
Closed

Add all existing articles from the wiki and improve formatting

Description 📖

This pull request adds the bulk of the wiki to the documentation website.

Took some liberties editing the copy, and tried to make the introduction light so that everyone can see the value of Windi CSS.

Future Work 🔮

  • Windi CSS really needs a CHANGELOG 😃
  • Anthony mentioned he will do the Algolia setup.
  • I have configured the nr search task so that it crawls the live website.
  • The algolia section of .vitepress/config.js should be uncommented and ENV variables should be added (Anthony in Netlify).
  • The json config might need to be modified to avoid duplicates, since Vitepress responds to both / and /index.html.

Screenshots 📷

Screen Shot 2021-02-15 at 21 52 19 Screen Shot 2021-02-15 at 21 46 49 Screen Shot 2021-02-15 at 21 46 28
opened Feb 15, 2021 by ElMassimo 0
Closed

feat: add installation instructions for all frameworks and flavors

Description 📖

This pull request adds installation instructions for all available packages, extracted from their respective READMEs.

Usage instructions should probably live on a common page, since it's very similar on all frameworks.

Also, made the Migration section framework-agnostic; linking to it from all installation pages.

Screenshots 📷

Screen Shot 2021-02-16 at 10 30 31 Screen Shot 2021-02-16 at 10 19 09 Screen Shot 2021-02-16 at 10 30 44
opened Feb 16, 2021 by ElMassimo 0
Closed

feat: expand features section as "New in Windi CSS"

Description 📖

This pull request reworks the "auto" section to emphasize all new features in Windi CSS, so that users finding the library can start taking advantage of useful features such as utility groups right away.

Also, it provides a short explanation on why Windi CSS can enable all utilities by default, which is a killer feature.

Screenshots 📷

Screen Shot 2021-02-16 at 11 23 12
opened Feb 16, 2021 by ElMassimo 0
Closed

fix: install command

opened Feb 16, 2021 by hannoeru 0
Open

Some classes not working after restart the server

Working as expected when added this class, but after the restarting dev server this class not working. class="border-opacity-10"

same issue for this also :class="`md:pl-${paddingLeft}`"

I am working on Vitesse @antfu

opened Feb 26, 2021 by rashidpathiyil 0
Open

Grouping utilities with parenthesis is not updating without restart the server

The changes are only updating on dom after restarting the server, I am using vitesse.

<div class="bg-white font-light sm:hover:(bg-gray-100 font-medium)"/>

opened Feb 26, 2021 by rashidpathiyil 0
Open

Dynamic class doesn't render

Using Windi with sapper, I have an issue when passing a tailwind class as a prop. I am building a responsive nav which has a "direction" prop such as flex-row on large device and flex-col on smaller ones : 

<ul class="flex {direction} justify-end space-x-8">

But this direction prop doesn't render on smaller device. I looked in the developer tools and when I uncheck the windi class (eg: windi-15d8t28) that is created, it works fine.

Thanks!

opened Feb 26, 2021 by sdelon 0
Open

Any examples with storybook?

I've tried adding import 'windi.css' to preview.js in the .storybook folder, but it won't even start up because it can't find windi.css

I've also tried adding a webpack.config.js using the Vanilla Webpack example from the documentation.

I am using Vite with antfu/vitesse as a starter template

opened Feb 25, 2021 by stecky 0
Open

Should have important plugin

I'm using windicss with vuetify, sometimes I need to override default css of vuetify, so I think it will bed good if we have important plugin

opened Feb 21, 2021 by viennv1709 1
Information
Category: JavaScript / CSS
Watchers: 2
Star: 46
Fork: 3
Last update: Feb 18, 2021

Contents
    Resource links
    https://windicss.netlify.app/
    https://github.com/windicss/docs
    Share this repo
    Most popular
    animate-css Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects
    FortAwesome The iconic SVG, font, and CSS toolkit
    thedaviddias 🗂 The perfect Front-End Checklist for modern websites and meticulous developers
    jgthms Modern CSS framework based on Flexbox
    Dogfalo Materialize, a CSS Framework based on Material Design
    tailwindlabs A utility-first CSS framework for rapid UI development.
    impress It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.
    google Material Design Components in HTML/CSS/JS
    GitSquared A cross-platform, customizable science fiction terminal emulator with advanced monitoring & touchscreen support.
    modernizr Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

    Related Repos


    CSS
    114
    Flexy is minimal CSS framework made with Flex
    vladocar Flexy Flexy is minimal CSS framework made with Flex Minimal. It is only 0.33 KB minified + gzip. Responsive. No unnecessary nesting. Fluid Column (even multiple times in one row) Flexible the main width can be any n
     
    CSS
    48
    100% Free & Open Source Bootstrap 4 Admin Template
    azamuddin Polished Admin Template Polished Admin bootstrap admin template based on Bootstrap v4. The colors and elements are inspired by Shopify Polaris. This template doesn't strictly follow all Polaris rules. Fully compatible with Boots
     
    CSS
    266
    The card component with good vibes
    siddharthkp A Card component with good vibes card-vibes is a beautiful card component that moves with grace on hover. Here's a demo on codesandbox install npm install card-vibes usage import Reac
     
    CSS
    48
    Enable `media` attribute on Vue SFC styles
    ktsn vue-media-loader Enable media attribute on Vue SFC styles. Requirements vue-loader &gt;= 15 Installation $ npm i -D vue-media-loader Usage Add vue-loader and vue-media-loader in your we
     
    CSS
    56
    Katana is CSS Layout System made with Flexbox
    vladocar Katana.scss Katana is CSS Layout System made with Flexbox Minimal flexbox system for making HTML layouts. Minimal. It only 20 lines of .scss. Clear syntax. Responsive. Fluid column. Anything can be personalised.
     
    CSS
    810
    Material Dashboard Angular
    creativetimofficial Material Dashboard Angular - Free Bootstrap Material Design Admin Material Dashboard Angular is a free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design. We are very excited to introduce our
     
    CSS
    1.2k
    💥Free and open-source admin dashboard template built with Bootstrap 4 💥
    flatlogic Sing App Lite - free and open source admin dashboard template Including responsive layout and high quality UI built with Bootstrap 4. View Demo | Download | Available versions | More templates This repository contains a limit
     
    CSS
    2.7k
    Give Github some XP flair 🔥
    martenbjork February 2019 Update: I received a cease and desist letter from a company claiming to work for Microsoft. The extension has subsequently been removed from the Chrome Store. 🎉 Following up… Github XP Microsoft + GitHub =